How to use cleanupStyles method in Cypress

You can do something like this. This will iterate through all the .course classes and inside that click on the button with text as Register one by one.

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').contains('Register').click()
})

OR

cy.get('.course').each(($ele) => {
    cy.wrap($ele).find('button').eq(1).click()
})

From Cypress Docs

Permanent trade-offs:

• There will never be support for multiple browser tabs.
• You cannot use Cypress to drive two browsers at the same time.

"Because Cypress runs in the browser, it will never have multi-tabs support. We do have access to the browser automation APIs to actually switch tabs, but there is no reason for us to ever expose them."

Same doc also leads to few examples on working this around:

• Tab Handling and Links
• Logging In

The following solution worked in my case.

cy.window().then((win) => {
  cy.stub(win, "open")
    .callsFake((url) => {
      return win.open.wrappedMethod.call(win, url, "_self");
    })
    .as("open");
});
cy.get("a").contains("Preview").click();
cy.get("@open").should(
  "have.been.calledWithMatch",
  "{your url}"
);

you can read more about this solution here. https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowopen

@jmargolisvt is correct, if you change the .click() operation to a Cypress command, you should get the correct sequence of actions.

Command execution sequence and test loops

Think of it like this - the test code above runs as normal javascript, and each cy.X() command puts a command into the queue. Commands are guaranteed to run sequentially in the queue order, but not synchronously with the test code.

So, the the cy.wait(2000) is not slowing down the for-loop, it's pausing the queue execution.

Waiting for assertions

Note also that commands have built-in waits for their assertions, so you probably don't need either the cy.wait() or the cy.waitUntil() in this scenario. You can control the maximum time for waiting with a timeout option.

Looping

The for loop will work ok if you convert the inner parts to commands, but you can also convert the loop itself to a cy.get().each() command which IMO is much neater.

Testing async content

Lastly, prefer cy.contains('mySelector', 'myContent') command to cy.get('mySelector').contains('myContent') command when waiting for async content.

The reason is cy.get('mySelector').contains('myContent') only waits on the element mySelector, but it's already in the DOM. If the content is asynchronously changing, this command will test the old content (presume empty) immediately and fail the test.

const tbodySelector = '#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody';
const buttonSelector = 'td:nth-child(7) > div > button.ant-btn.ant-btn-primary.ant-btn-sm';
const spanSelector = 'td:nth-child(3) > span'

cy.get('.instances__action').each(($el, i) => {

    cy.get(`${tbodySelector} > tr:nth-child(${i+1}) > ${buttonSelector}`)
      .click();

    cy.contains(
      `${tbodySelector} > tr:nth-child(${i+1}) > ${spanSelector}`, 
      'Finished', 
      { timeout: 2000 }  // increase timeout if a longer wait is required
    );  

});

NOTE jQuery's :nth-child(index) selector starts at index 1, but .each(($el, i) => has zero-based indexes, so must use i+1 within these selectors.

This is the mock DOM I used to test with. In a clean Cypress project, put it in folder <project root>/app.

<table>
  <tbody>
    <tr class="instances__action">
      <td>
        <button id="myBtn1"></button>
      </td>
      <td>
        <span id="mySpan1"></span>
      </td>
    </tr>

    <tr class="instances__action">
      <td>
        <button id="myBtn2"></button>
      </td>
      <td>
        <span id="mySpan2"></span>
      </td>
    </tr>
  </tbody>
</table>
<script>
  document.getElementById("myBtn1").addEventListener("click", function() {
    setTimeout(() => {
      document.getElementById("mySpan1").innerHTML = "Finished";
    }, 1000)
  });
  document.getElementById("myBtn2").addEventListener("click", function() {
    setTimeout(() => {
      document.getElementById("mySpan2").innerHTML = "Finished";
    }, 500)
  });
</script>

Note the nesting above is simplified, so I changed the selector contants appropriately.

Testing the above HTML fragment

it('clicks buttons and waits for finished flag', () => {

  cy.visit('app/iterate-table-buttons.html')

  const tbodySelector = 'tbody';
  const buttonSelector = 'td:nth-child(1) > button';
  const spanSelector = 'td:nth-child(2) > span'

  cy.get('.instances__action').each(($el, i) => {

      console.log(`starting #${i}`)

      cy.get(`${tbodySelector} > tr:nth-child(${i+1}) > ${buttonSelector}`)
        .then(() => console.log(`clicking #${i}`))
        .click();

      cy.contains(
        `${tbodySelector} > tr:nth-child(${i+1}) > ${spanSelector}`, 
        'Finished',
        { timeout: 2000 }  // increase timeout if a longer wait is required
      )
      .then(() => console.log(`asserting #${i}`))

  });
})

Cypress log

This is what the Cypress log looks like.
All green, and can see the clicks only happen after the Finished text appears.

1. VISIT app/iterate-table-buttons.html
2. GET .instances__action
3. GET tbody > tr:nth-child(1) > td:nth-child(1) > button
4. CLICK
5. CONTAINS tbody > tr:nth-child(1) > td:nth-child(2) > span, Finished
6. GET tbody > tr:nth-child(2) > td:nth-child(1) > button
7. CLICK
8. CONTAINS tbody > tr:nth-child(2) > td:nth-child(2) > span, Finished

Console log

This is what the console logs look like.

The loop executes to completion before the command queue even begins, but that's ok because the commands are still executing in correct order.

starting #0
starting #1
clicking #0
asserting #0
clicking #1
asserting #1

You can specify which .collapse you want by the content of it's children

cy.contains('.collapse', 'Apple')  // gets the 1st collapse element where child has "Apple" text
  .find('item').eq(1)             // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

If your actual HTML is more complicated and you want to start with the title element,

cy.contains('.title', 'Apple')  // get the title child with "Apple" text
  .parent()                    // move up to div.collapse
  .find('item').eq(1)         // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

or siblings navigation

cy.contains('.title', 'Apple')  // get the tile child with "Apple" text
  .siblings('item').eq(1)       // 2nd item sibling
  .should('have.text', 'Apple 2')

This test works

cy.visit('https://app.staging.showcare.io/product-showcase/login')
cy.get('.modal-dialog').should('be.visible')
cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .click({ force: true })

There is a warning that there are two #signInFormUsername, so add .eq(0) to ensure you click the right one.

Also, the control has a parent with CSS display: none, so { force: true } is needed on the .click().

Please note, you will have to restart Cypress test runner after setting "chromeWebSecurity": false.

The full login sequence

cy.visit('https://app.staging.showcare.io/product-showcase/login')

cy.get('.modal-dialog').should('be.visible')

cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .type('userName', { force: true })

cy.get('#signInFormPassword').eq(0)
  .type('password', { force: true })

cy.get('[name="signInSubmitButton"]').eq(0)
  .click({ force: true })

The page URL of the login form is (the beginning part)

https://vep-staging.auth...amazoncognito.com/login?...&redirect_uri=https%3A%2F%2Fapp.staging.showcare.io%2Fproduct-showcase&...

and that redirect_uri parameter should send you back to https://app.staging.showcare.io/product-showcase after successful login.

If not, you can do the login part in a beforeEach() and then visit the main page in the test. A login token should be stored for you by the login step.

Also, wrap the code in a cy.session() to do the login just once, and preserve the token for all tests (same as happens with a user logging in and doing various things in a session.

The full test,

Cypress.config('experimentalSessionSupport', true)  // set this flag

beforeEach(() => {
  cy.session('mySession', () => {

    // preserve the login across all tests

    cy.visit('https://app.staging.showcare.io/product-showcase/login')
    cy.get('.modal-dialog').should('be.visible')
    cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .    type('userName', { force: true })
    cy.get('#signInFormPassword').eq(0)
      .type('password', { force: true })
    cy.get('[name="signInSubmitButton"]').eq(0)
      .click({ force: true })
  })
})

it('tests the app main page after login', () => {

  // should be logged in here, so visit main page
  cy.visit('https://app.staging.showcare.io/product-showcase') 

  // test the main page, e.g 
  cy.get('nav').contains('Homepage')
})

While investigating to post the question, I came up with a simple solution to this problem. The subject is an object which has a selector, so you can use that selector with cy.get(subject.selector) to get the Dom Element:

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

I think this is not a lot of clear and more people may have this issue, so I leave my solution here.

To answer your original question, the cypress.env.json file needs to be placed inside the root of your project, right next to the cypress.json file.

By creating a separate cypress.env.json file you're able to access nested values, like so:

//cypress.env.js
{
    "user": {
        "username": "Jane",
        "password": "SuperPassword",
        "someOtherData": "veryImportantData"
    }
}

and then

//somewhere in myCypressTest.spec.ts
Cypress.env("user").username      //returns "Jane"
Cypress.env("user").password      //returns "SuperPassword"
Cypress.env("user").someOtherData //returns "veryImportantData"

It's not really documented accurately anywhere unfortunately. I didn't need to change any paths, just moved the cypress.env.json outside the Cypress folder where I had originally placed it, and it started working.

With this recursive function you just need to pass a variable that decrements (or maybe increments to a max)

function deleteAllFoundProducts(rowCount) {
  if (rowCount < 1) return // if no rows remain, terminate recursion
  cy.get('span[title="Delete"]', {timeout: 10000}).first().click()
  cy.get('.tBtn[title="Yes"]').click().then(() => {
    cy.get('.loader', {timeout: 10000}).should('not.exist') // wait for list to reappear
    deleteAllFoundProducts(--rowCount) // try again
  })
}

cy.get('tbody tr')
  .then(rows => deleteAllFoundProducts(rows.length))  // first call here

This will still work when there's a "No matching records found" row appended after deleting all rows, since rowCount is obtained before deletions start.