framework React 18 Nextjs 13 cypress 10.8.0 GitHub workflow---- e2e-test: runs-on: ubuntu-latest steps: - uses: actions/setup-node@v3 with: node-version: 16 - uses: actions/checkout@v3 - uses: cypress-io/github-action@v4 env: NEXT_PUBLIC_API_HOST: '＊＊＊' NEXT_PUBLIC_GROWTHBOOK_API: $＊＊＊ NODE_TLS_REJECT_UNAUTHORIZED: 0 with: browser: chrome start: yarn dev wait-on: 'https://localhost:3000' the error from: cy.visit('/products'); cy.get('img[class^="ProductCard_card-image"]').eq(0).parent().click(); cy.url({ timeout: 10000 }).should('contains',

${baseUrl}/products/

); It seems often occurred from cy.url() or cy.visit(). I guess and survey to the reasons: 1. react 18 useffect render twice, or next.js link 2. our test environment api response time is too unstable 3. GitHub ubuntu test environment I tried some workarounds: 1. use then chain -> failed 2. cy.wait(3000) -> success, but is not a good method 3. use intercept -> failed I found one solution is using node 18 and 127.0.0.1, but it will affect too much so I didnt do yet. could someone give me any advice?

I can see that your assertion value has '/' at the end and the url that it is compared to does not. But maybe that is not the case. I had a similar problem with cy.url() and spent a few days trying to figure this out. In my case, the test was improperly designed, and moving from '/' to '/settings' was not necessary so I just started the test on 'settings 🙂

Thanks for your reply. Did you also get assertion timeout on CICD but local was fine? but I think '/' is correct, because after clicking, will link to /products/[product_id]

the point about the assertion error is a good one, and I think what is happening is that the click is firing before the image component is truly ready to be clicked, and so the page URL doesn't change in response to the click, even though the click happens and passes. Is there an API call that populates the images and provides the URL that will be navigated to when the image is clicked? It sounds like there is. So you'd need to wait for that to complete, and for react to re-render. Do you also control the front-end code here? Is the parent of the image a link? If it's a link element with an href, you could assert the href to exist and Cypress will do retries until it does. Overall it seems like a situation where you want to find some way to use the built in retries of Cypress to confirm the app reaches the ready state without adding a manual wait. The exact thing to wait for would vary depending on the app. But my guess is, you want that before the click, instead of a timeout after the click.

we used next ssr to fetch product list data on /products, and the parent was wrapped by next Link component "does this mean that sometimes these things pass and sometimes they fall?" - yes, it appeared occasionally last week ago, but all failed every time now --- you gave a new way, very thankful! "If it's a link element with an href, you could assert the href to exist and Cypress will do retries until it does." - this means maybe I can try cy.get('a').should('have.attr', 'href'); right? it very hard to debug only occur on GitHub CICD🫠