3

In my Cypress test, I need to test a link which downloads a .txt, .xlsx and a .zip file when clicked, but when I use "click()" to click the hyperlink, it starts a page load and expects a new action to happen as a result of clicking a link.

Here is a screenshot of the issue described above

As an alternative to this I tried using the cy.downloadFile() to download the files directly through the link but the link I am using is dynamically generated hence I am unable to use that as well. Hence I want to store the newly generated link in the variable and then use it in cy.downloadFile() every time I run the test.

Are there any other ways to test a hyperlink or how to store the dynamically generated link every time the test is run?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Kumari Sonika
  • 33
  • 1
  • 3

5 Answers5

3

Hi there i been through this problem before.

I think it is the same scenario where the cypress test runner just keep waiting page load event and not go to the next test command while file are successfully downloaded.

Add custom cy.window event to listen the click event and add timeout to "force" reload current page, you need to tweak the timeout value so it suitable for your test.

    it.only('tes button download', ()=> {
        // visit url
        cy.visit("/spmb/list_nilaiseleksi");
        cy.get('#wrap-button > .btn').click()
        
        //download
        cy.window().document().then(function (doc) {
            doc.addEventListener('click', () => {
              setTimeout(function () { doc.location.reload() }, 5000)
            })
            cy.get(':nth-child(9) > .col-md-12 > .btn').click()
        })

    })

More details and discussion available here on cypress github issue : https://github.com/cypress-io/cypress/issues/14857

Putra Prima A
  • 136
  • 7
1

For me works the solution: If Cypress waits for the 'Page load' event, let's provoke it!

export const invokeReload = (callBack) => {
    cy.window().then((win) => {
        win.document.addEventListener('click', () => {
            setTimeout(() => {
                win.document.location.reload();
            }, 5000);
        });

        callBack();
    });
};

and now we can click on the download button:

clickOnDeployButton() {
    invokeReload(() => {
        cy.get(this.deployButton).click();
    });
}

In this way we click on download and then reload the page, as a result, we have our downloaded file and Cypress got their 'Page load' event

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Alexander Chako
  • 11
  • 2
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ben the Coder May 10 '23 at 14:03
0

I found a way to store the link of the element I want to click. Since I am able to store the link, I am able to solve the requirement by using cy.downloadFile().

cy.get('@selector', {timeout: 15000}).then(($input) => {
            cy.downloadFile($input.attr('href'),'cypress/downloads','filename.csv')
        });
Kumari Sonika
  • 33
  • 1
  • 3
0

For me, the problem was resolved after I added the download attribute to the link, This is changing the element in the DOM, but it keeps the solution simple:

        cy.get('[href="download?type=php"]')
            .then((el) => {
                el.attr('download', '');
            })
            .click();
colin0117
  • 1,448
  • 1
  • 11
  • 15
0
cy.once("fail", (err) =>
{
    return false;
});
djg
  • 131
  • 9