How to use firefoxUtil.collectGarbage method in Cypress

Steps to install cypress:

Step 1: Create your project folder, go inside the folder from the terminal using cd folder_path/folder_name and run npm init. This will create your package.json file inside your project folder. You can do this in a sperate project or create some folder in your development project and do it there as well.

Step 2: Now, Run the command npm install cypress --save-dev. This will add the cypress as a dev dependency inside your package.json file. Once you have successfully installed this, you should see one more file package-lock.json and an folder node_modules being created

Step 3: Run the command node_modules/.bin/cypress open or node_modules/.bin/cypress run to run cypress.

Your problem stems from the fact that cypress commands are not promises, although behaving like promises.

I can think of two options:

• Try to refactor your test code to not use async/await, as these commands don't behave as expected when running your code on cypress (check this bug). Cypress already has a whole way of dealing with async code as it creates a command queue that always run sequentially and in the expected order. That means you could observe the effects of your async code to validate that it happened before moving forward on your test. For instance, if User.createUserOnServer must wait a successful API call, add code to your test that will wait for the request to complete, using cy.server(), cy.route() and cy.wait(), like below:

  cy.server();
  cy.route('POST', '/users/').as('createUser');
  // do something to trigger your request here, like user.createOnServer()
  cy.wait('@createUser', { timeout: 10000});
  

• Use another third-party library that changes how cypress works with async/await, like cypress-promise. This lib may help you to treat cypress commands as promises that you can await in your before code (read more about it in this article).

The answer is in the use of clear()

clear() is an alias for type('{selectall}{backspace}')

Through several permutations of the test code, I landed on two which consistently failed and worked, exclusively.

The use of clear() in a slight variation on that in the question consistently caused the collapse of the div containing the textarea, nested in an accordion view, causing the textarea to become non-visible. Cypress is unable to type() execute tasks on non-visible elements.

Omission of {backspace} consistently works.

The working test code:

cy.get('textarea.comment').type('{selectall}Comments mod test').then(() => {...

Code below will help you to stub window.open and further assert it that function has been triggered:

it('opens the about page', () => {
  cy.visit('/')
  cy.window().then(win => {
    cy.stub(win, 'open').as('Open')
  })
  cy.get('.your-selector').click()
  cy.get('@Open').should('have.been.calledOnceWithExactly', yourUrl)
})

You also can stub window.open in cy.on hook as you did, what helps you to yield new window object each time after page reload. However, if you want to actually open the new Url in existing tab instead of new one you can use this code below by passing "_self" param to overwrite old "_blank":

cy.window().then(win => {
          cy.stub(win, 'open').callsFake((url) => {
            return win.open.wrappedMethod.call(win, url, '_self');
          }).as('Open');
        });

callsFake function dynamically withdraws url which has been placed into original window.open(url, "_blank"), or you can manually change url inside .call(win, url, '_self'); with static one, so regardless on which link or button you clicked, which triggers window.open, they all will open the same url.

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress

Here is how you do it. It took me HOURS, - but this works for me and it's thoroughly tested. I did swap out the variables below (obviously).

I made a bunch of Commands, to swiftly be able to log in/out, between tests.

WARNING!!!!!

Remember to add adminUserLoginCookiesFromCypress.json to you .gitignore - and don't upload it to your server. If that gets in the wrong hands, then someone would be able to login as your user (by adding the cookies to their own browser).

Env

This content goes in cypress.json in the project root.

{
  "env": {
    "baseUrl": "https://s1.demo.opensourcecms.com/wordpress",
    "dashboardUrl": "https://s1.demo.opensourcecms.com/wordpress/wp-admin",
    "domain": "s1.demo.opensourcecms.com/wordpress",
    "users": {
      "admin": {
        "username": "opensourcecms",
        "email": "test@example.org",
        "pw": "opensourcecms"
      }
    }
  },
}

Commands

Clear cookies

For some reason, I couldn't (and can't) get cy.clearCookies() to work. If I run a test that logs into WP, then it's still logged, when the test runs the second time. Even if I run cy.clearCookies() first thing (?!)

This manual/specific clearCookie-Command worked for me:

Cypress.Commands.add( "clearWordPressCookies", () => {
  cy.clearCookie( 'wordpress_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_logged_in_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_test_cookie' );
});

Remember to find the actual cookie-names for your site and replace the hash. The reason for the hash in the cookie-name is due to multisite purposes

Get cookies

Saves the cookies to a file (in the project root).

Cypress.Commands.add( "getWordPressCookies", () => {
  cy.getCookies()
    .then( (cookies) => {
      cy.writeFile( 'adminUserLoginCookiesFromCypress.json', cookies );
    });
});

Set cookies

Sets the cookies from the saved file (from the Get cookies-function).

Cypress.Commands.add( "setWordPressCookies", () => {

  cy.readFile( 'adminUserLoginCookiesFromCypress.json' )
    .then( (cookies) => {
      cookies.forEach( (cookie) => {
        // cy.log( JSON.stringify( cookie ) ); // See the cookie contents
        cy.setCookie( cookie.name, cookie.value, {
          domain: Cypress.env('domain'),
          path: cookie.path,
          secure: cookie.secure,
          httpOnly: cookie.httpOnly,
          expiry: cookie.expiry
        });
      });
    });
});

Manual login

This has to be done the first time, to get WordPress to generate the cookies.

Cypress.Commands.add( "manualWordPressLogin", () => {
  cy.clearWordPressCookies();
  cy.visit( Cypress.env('dashboardUrl') );
  cy.get('#user_login').wait(200).type( Cypress.env('users').admin.username , { force: true } );
  cy.get('#user_pass').wait(200).type( Cypress.env('users').admin.pw, { force: true } );
  cy.get('#wp-submit').click();
  cy.get('h1').contains( 'Dashboard' );
});

Example usage

context( 'Login, set and prep cookies' , function () {

  it( 'Ensure no one is logged in', function() {
    cy.clearWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should('eq', '/wp-login.php' ); // Not logged in
  });


  it( 'Logs in a admin user', function(){
    cy.manualWordPressLogin();
    cy.getWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-admin/ );
  });  
  

  it( 'logs out the user - and logs back in using setting wp-cookies', function(){
    cy.clearWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-login\.php/ ); // Not logged in
    cy.setWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-admin/ ); // Is logged in
  });

});

Ideally, you would know how many rows are in the data that your test has to deal with. Then your tests works simply and perfectly.

Assuming that's not so, try refreshing the count at the exit point of the recursive function.

It's a 2nd-best choice, because the page may not be stable when the re-count is performed.

Updated

• Added a pageCount limit to avoid "Maximum call stack size exceeded", for example if something is wrong with delete button selector and rows are not actually deleted.

• Moved recursion call inside .then() after cy.wait(1000) to ensure steady rate of row deletion (i.e allows delete action to complete)

deleteDeliveryAddresses() {

  const selector = 'foerch-delivery-addresses-item .row:contains("automated address name")'

  const deleteRow = (rowsToDelete, pageCount = 0) => {

    // Set a page limit to avoid "Maximum call stack size exceeded"
    // if something goes wrong, for example rows are not deleted
   
    if (pageCount > 10) throw 'Too many pages processed'

    if (rowsToDelete === 0) {

      pageCount++   // track how many pages

      // refresh row count, using jQuery expression instead of .get()
      // so that if truly no more rows, test will exit gracefully
      // Table must be stable at this point
      rowsToDelete = Cypress.$(selector).length  

      if (rowsToDelete === 0) return
    }

    cy.get(selector).eq(0)
      .find('button:nth-child(2)').click({force:true})

    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('be.visible').click()
    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('not.exist')

    cy.wait(1000).then(() => {
      deleteRow(--rowsToDelete, pageCount)   // delay next delete until wait is complete
    })
  }

  cy.get(selector).then($rows => {
    const rowsToDelete = $rows.length
    deleteRow(rowsToDelete)
  })
}

Otherwise, this is a possible pattern for using the page-count

deleteDeliveryAddresses() {

  const rowSelector = 'foerch-delivery-addresses-item .row:contains("automated address name")'
  const pageCountSelector = '...something that indicate to the user the total page count'
  const rowsPerPage = 10

  const deleteRow = (rowsToDelete) => {

    if (rowsToDelete === 0) return

    cy.get(rowSelector).eq(0)
      .find('button:nth-child(2)').click({force:true})

    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('be.visible').click()
    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('not.exist')

    cy.wait(1000).then(() => {
      deleteRow(--rowsToDelete)   // delay next until wait is complete
    })
  }

  cy.get(pageCountSelector).then($pageCounter => {
    const pageCount = +$pageCounter.text()  // numeric from element text
    if (pageCount > 1) {
      deleteRow((pageCount -1) * rowsPerPage) // all but last page
    }

    // last page might be partial (less than 10)
    cy.get(rowSelector).then($rows => deleteRow($rows.length)
  })
}

If re-enable happens only after POST response, add a delay to the intercept to allow enough time for cy.get('#edit-document-data-number').find('input').should('be.disabled') to pass.

cy.intercept('POST','**/api/update-data', {
  statusCode: 200,
  delay: 2000,                               // delay here, maybe shorter will work
  fixture: 'test_input_no_data.json'
}).as('updateData')

cy.visit("http://localhost:8080")
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click();  
cy.get('div[role="dialog"]').find('button').eq(1).click();  

cy.get('#edit-document-data-number input')  // select in one command 
  .should('be.disabled')                    // for retry of assertion

cy.wait('@updateData')

cy.get('#edit-document-data-number input')  
  .should('not.be.disabled')                 

cy.get('@updateData').then((interception) => { 
  ...

You should ensure your server is running before calling cypress run using a utility like wait-on or start-server-and-test.

Cypress's check on the baseUrl is a final courtesy check just so you don't run through your whole test suite on a server that is not running.

For tips on ensuring your server is running before running Cypress, check out the Cypress docs here: https://on.cypress.io/continuous-integration#Boot-your-server