First of all i wouldnt do the loop. It seems like your application is really flaky if you have to loop over your test multiple times just to see if an element is visible. So what is the problem you are trying to solve with the loop. You could also use cypress test retries so that if a test fails it will restart the test but again this is bandage fix and not a real solution. Can you explain why you are looping. If you are waiting for a button to appear do you know if this button will be shown because of certain preconditions? If there are network request happening before the visibility of the button maybe you should first wait on those requests. with cy.intercept and cy.wait https://docs.cypress.io/api/commands/intercept Also another tip, i would also remove the Cypress.on from your test and put them in your cypress/support/e2e.js file. This will be auto imported by Cypress.

I'm unable to have my assertion "execute" during my test. This fails to happen both when using

assert

as well as

expect

. From reading the cypress API, both should be valid assertion methods. All I'm wanting to do is make sure that

startDate

and

endDate

are equal, and have that assertion visible in the command log:

Typescript
// Validate custom date set is retained by checking
// if start and end date still match each other
export function validateCustomDateSelection() {
    let startDate, endDate;
    getCustomDateStartDateInput()
        .invoke('val')
        .then((date) => {
            startDate = String(date).split('/')[1];
        });
    getCustomDateEndDateInput()
        .invoke('val')
        .then((date) => {
            endDate = String(date).split('/')[1];
        });

    assert.equal(startDate, endDate);
    // expect(startDate).to.eq(endDate);
}

what does getCustomDateStartDateInput do?

it's just a getter for a start date input element 🙂:

cy.getDataCy('customDateStartDateInput');

ok, so you are confusing command chain (that executes the things one by one and passes the data forward) with the synchronous assertion. So you are using

startDate

and

endDate

before they get their values. See https://github.com/bahmutov/cypress-command-chain

Ah I see, thank you so much, i'll try to .then/ .wrap it instead

Typescript
    getCustomDateStartDateInput().invoke('val').then(date => {
        getCustomDateEndDateInput().should('have.value', date)
    })

Ended up working well for me

that is good idea, here are a few more https://github.com/bahmutov/cypress-aliases/commit/7866c130f482d1ae4ecc1a7af2d37e10fe07cfd5

Just want to give a huge thanks in general, I see your posts/ videos/ blogs, everywhere, and I always come away learning something new. You're amazing 🙂

Ok thank you bro

Hi everyone, Please, I do not understand why I cannot select element with data-cy properties unless I use cypress studio to select the class names. This will not work:

cy.get('[data-cy="btc_coin_name"]')

but this will work:

cy.get('.children > .gap-y-10 > :nth-child(1) > .md\\:grid-cols-3 > :nth-child(1) > .justify-between.items-center > :nth-child(1) > .grid > [data-cy="btc_coin_name"]')

The layout of my code is basically something like:

// to show only element on big screen
<div class="hidden lg:block">
  ...code here
</div>

// to show only element on small screen
<div class="lg:hidden">
  ...code here
</div>

Please, what can I do as these class selectors are not maintable (because they can change anytime and the codebase is big). Thanks

have you missed the ']' in

const element = cy.get('[data-cy="btc_coin_name')

? it should be

'[data-cy="btc_coin_name"]'

It's typo error. It is definitely written well

Showing element that is hidden

I'm expecting only one element

The element being expected to be shown is this Bitcoin text

it says it found two with the same locator. so you need to add more to locate the exact one you need. look for the parent elements, texts etc. is there anything else to help locate?

That's why I am worried. It's only supposed to find one. The first element is probably for the mobile viewport while the second is for the desktop viewport. I selected the viewport that I wanted (which is desktop). So, I don't understand why it's two that is being found

One is supposed to be hidden by default because the parent has display of none

This is what cypress studio selected for me for the same element:

cy.get( '.max-w-7xl > .gap-y-10 > :nth-child(1) > .md\\:grid-cols-3 > :nth-child(1) > .justify-between.items-center > :nth-child(1) > .grid > [data-cy="btc_coin_name"]').should("be.visible");

The issue is that if any of the classes should change for any reason, the test will automatically fail, which I am trying to avoid. I have tried debugging this but no reasonable progress

are you able to move data-cy to it's parent elements or grandparent elements where it can differentiate from the other one? then find the span inside the parent. otherwise maybe use the text to locate

Text cannot be used because there will likely be more elements with that text...

As for the parent/wrapper, how do I use it together with what I want to select:

// to show only element on big screen
<div class="hidden lg:block" data-cy="desktop-layout-view">
  ...code here
</div>

// to show only element on small screen
<div class="lg:hidden" data-cy="mobile-layout-view">
  ...code here
</div>

Another question will be: If I am finally able to select an element within the parent using the parent selector (I don't know to...yet), won't I have issue if I am trying to select the same thing on mobile (as I will have to manually change the parent selector or duplicate the code for another viewport)?

you can add to both

cy.get('[data-cy=mobile-layout-view]').find('[data-cy=bit_coin_name]')

Mobile

Desktop

did add data-cy to both parent

div

and child

span

?

Yes... but these elements are not direct parent and children.

Does the other element I'm trying to find has to be a

span

?