单击 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})
您可以选择不同的网络调用来等待,从而缩短页面加载等待时间。
我在网页上注意到两件事:
- 显示了两个弹出窗口。单击这两个按钮后,一切都按预期进行。
- 网页会抛出随机异常,因此为了稳定测试,您必须告诉您的 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})
})
我 运行 陷入这个问题,但没有找到好的解决方案。我尝试了在 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})
您可以选择不同的网络调用来等待,从而缩短页面加载等待时间。
我在网页上注意到两件事:
- 显示了两个弹出窗口。单击这两个按钮后,一切都按预期进行。
- 网页会抛出随机异常,因此为了稳定测试,您必须告诉您的 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})
})