I am running into this problem without finding a good solution. I tried every post that I found in Google but without success. I am isolating the problem so I can share you the exact point. I am searching an specific product in "mercadolibre" and I want to sort the list from the lower price to the maximum. To do so you can enter directly here and clicking over the option "Menor Precio".

Doing manually this just works fine but with Cypress I am not being able to do that. This script just runs fine but the last step seems to have no effect.

// Activate intelligence
/// <reference types="Cypress" />

describe("Main test suite for price control", () => {
    it("search scanners and order them by ascending price", () => {
      // Web access
      cy.visitAndWait("[A:scanner%20blueetooth");

      // Order by ascending price
      cy.get(':nth-child(2) > .andes-list__item-first-column > .andes-list__item-text > .andes-list__item-primary').click({force: true})
    });
});;

I am running into this problem without finding a good solution. I tried every post that I found in Google but without success. I am isolating the problem so I can share you the exact point. I am searching an specific product in "mercadolibre." and I want to sort the list from the lower price to the maximum. To do so you can enter directly here and clicking over the option "Menor Precio".

Doing manually this just works fine but with Cypress I am not being able to do that. This script just runs fine but the last step seems to have no effect.

// Activate intelligence
/// <reference types="Cypress" />

describe("Main test suite for price control", () => {
    it("search scanners and order them by ascending price", () => {
      // Web access
      cy.visitAndWait("https://listado.mercadolibre..ar/scanner-blueetooth#D[A:scanner%20blueetooth");

      // Order by ascending price
      cy.get(':nth-child(2) > .andes-list__item-first-column > .andes-list__item-text > .andes-list__item-primary').click({force: true})
    });
});;

Maybe Am I using a bad approach to refer the object?

Best regards!

• javascript
• google-chrome
• cypress

Share Follow asked Oct 22, 2021 at 20:16 NicoNico 35111 gold badge44 silver badges2121 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

I would retry menu until options bee visible

Cypress.on('uncaught:exception', () => false)

before(() => {
  cy.visit('https://listado.mercadolibre..ar/scanner-blueetooth#D%5BA:scanner%20blueetooth%5D') 
})

it('retries the menu open mand', () => {

  function openMenu(attempts = 0) {
    if (attempts > 6) throw 'Failed open menu'

    return cy.get('button.andes-dropdown__trigger').click()
      .then(() => {
        const option = Cypress.$('.andes-list:visible') // is list visible
        if (!option.length) {
          openMenu(++attempts)  // try again, up to 6 attempts
        } 
      })
  } 

  openMenu().then(() => {
    cy.get('a.andes-list__item:contains(Menor precio)').click()
  })

  // Verification
  cy.contains('.ui-search-result__wrapper:nth-child(1)', '$490', {timeout:20000})
})

You may have noticed the polite discussion about dismissing the popups, is it necessary or not.

I believe not, and to rely on dismissing the popups will give a flaky test.

I also think the issue is as @DizzyAl says, the event handler on the dropdown button is not attached until late in the page load.

This is what I tried, using retries to give a bit more time for page loading.

Cypress.on('uncaught:exception', () => false)

before(() => {
  cy.visit('http://mercadolibre..ar')
  cy.get(".nav-search-input").type("scanner bluetooth para auto{enter}");
  cy.get('.ui-search-result__wrapper')  // instead of cy.wait(3000), wait for the list
})

it('gets the dropdown menu on 1st retry', {retries: 2}, () => {

  // Don't dismiss the popups

  cy.get('button.andes-dropdown__trigger').click()
  cy.contains('a.andes-list__item', 'Menor precio').click()

  // page reload happens
  cy.contains('.ui-search-result__wrapper:nth-child(1)', '$490', {timeout:20000})
});

It looks like the click event is being added to the dropdown button late, and the click is failing.

See When Can The Test Start? for an discussion.

I tried to adapt the code in the article, but couldn't get it to work.

However, adding a cy.wait() or a cy.intercept() for the last network call works.

cy.intercept('POST', 'https://bam-cell.nr-data/events/**').as('events')
cy.visit('https://listado.mercadolibre..ar/scanner-blueetooth#D%5BA:scanner%20blueetooth%5D')
cy.wait('@events', {timeout: 20000})

// Page has loaded, verify the top item price
cy.contains('.ui-search-result__wrapper:nth-child(1)', '$1.385')

// Open the sort-by dropdown
cy.get('button.andes-dropdown__trigger').click()

// Choose sort-by lowest price
cy.contains('a.andes-list__item', 'Menor precio').click()

// Verify first item has different price, long timeout to wait for page re-load
cy.contains('.ui-search-result__wrapper:nth-child(1)', '$490', {timeout:20000})

You may be able to shorten the page load wait by picking a different network call to wait on.

I noticed two things on the webpage:

1. There were two pop-ups that were displayed. Once you click both of them, everything worked as expected.
2. There are random exceptions being thrown from the webpage, so you have to tell your cypress script to ignore those, for stable tests. Having said that, this is not a good practice as you want your tests to catch exceptions like this. Also, ask your devs to look into it and fix the issue causing the exception to be thrown.

The below script worked for me without any additional timeouts.

cy.visit(
  'https://listado.mercadolibre..ar/scanner-blueetooth#D%5BA:scanner%20blueetooth%5D'
)
Cypress.on('uncaught:exception', (err, runnable) => {
  return false
}) //For ignoring exceptions
cy.get('#newCookieDisclaimerButton').click() //Click Accept cookies button
cy.get('.andes-button--filled > .andes-button__content').click() //Click the pop up button
cy.get('.andes-dropdown__trigger').click() //Clicks the dropdown menu button
cy.get('.andes-list > :nth-child(2)').click() //Clicks the first option from the dropdown