单击 Cypress 中的隐藏元素不起作用

Clicking over hidden element in Cypress is not working

我 运行 陷入这个问题,但没有找到好的解决方案。我尝试了在 Google 中找到的每个 post,但没有成功。我正在隔离问题,以便我可以与您分享确切的观点。我正在“mercadolibre.com”中搜索特定产品,我想将列表从低价到高价排序。为此,您可以直接输入 here 并单击“Menor Precio”选项。

手动执行此操作效果很好,但使用 Cypress 我无法执行此操作。这个脚本运行正常,但最后一步似乎没有效果。

// 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.com.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})
    });
});;

也许我使用了错误的方法来引用对象?

此致!

看来下拉按钮添加点击事件晚了,点击失败了。

请参阅 When Can The Test Start? 进行讨论。

我尝试修改文章中的代码,但无法正常工作。

但是,为最后一个网络调用添加 cy.wait()cy.intercept() 是可行的。

cy.intercept('POST', 'https://bam-cell.nr-data.net/events/**').as('events')
cy.visit('https://listado.mercadolibre.com.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)', '.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)', '0', {timeout:20000})

您可以选择不同的网络调用来等待,从而缩短页面加载等待时间。

我在网页上注意到两件事:

  1. 显示了两个弹出窗口。单击这两个按钮后,一切都按预期进行。
  2. 网页会抛出随机异常,因此为了稳定测试,您必须告诉您的 cypress 脚本忽略这些异常。话虽如此,这不是一个好的做法,因为您希望您的测试能够捕获这样的异常。另外,请您的开发人员调查并解决导致抛出异常的问题。

下面的脚本对我有用,没有任何额外的超时。

cy.visit(
  'https://listado.mercadolibre.com.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

您可能已经注意到有关关闭弹出窗口的礼貌讨论,是否有必要。

我相信不会,依靠关闭弹出窗口会给出一个不稳定的测试。

我也认为问题正如@DizzyAl 所说,下拉按钮上的事件处理程序直到页面加载后期才附加。

这是我尝试过的,使用重试来为页面加载提供更多时间。


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

before(() => {
  cy.visit('http://mercadolibre.com.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)', '0', {timeout:20000})
});

我会重试菜单,直到选项可见

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

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

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

  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)', '0', {timeout:20000})
})