选择器根据移动设备与桌面设备中的索引而变化。如何在赛普拉斯中处理断言

Question

我有一个选择器，当运行在移动设备中时会发生变化。例如：

桌面：div[data-test-id="popup"] div:nth-child(2) 手机：div[data-test-id="popup"] div:nth-child(3)

我的想法是检查 window 的大小，如果它低于 375，则使用移动选择器，否则使用桌面。

我有以下可行的解决方案，但我不想重复代码，而是想将 2 或 3 作为参数传递：

cy.get('body').then( (body) => {
       if ( body.width() <= 375 ) {
           cy.get('div[data-test-id="popup"] div:nth-child(3)')
               .children().eq(0)
               .should('exist')
               .should('have.text', time);
       }
       else {
           cy.get('div[data-test-id="popup"] div:nth-child(2)')
               .children().eq(0)
               .should('exist')
               .should('have.text', time);
       }
    });

有没有更好的改写方式？

此外，上面的代码，即使它运行并且测试通过，由于 body.width() --> TS2532: Object is possibly 'undefined'.

，构建失败并出现 Typescript 错误

Answer 1

我会使用 viewport 显式设置宽度

来测试桌面和移动设备

const widths = [500, 350]
widths.forEach(width => {

  // You are looking for a way to parameterize the selector,
  // do it using a template literal
  const param = width === 350 ? 3 : 2
  const selector = `div[data-test-id="popup"] div:nth-child(${param})`

  beforeEach(() => {
    cy.viewport(width, 800)
  })

  it(`tests the width of ${width}px`, () => {
    cy.get(selector)
      .children().eq(0)
      .should('exist')
      .should('have.text', time)
  })
})

看来您需要以某种受限的方式使用视口，或者

在 beforeEach() 钩子中
前一页 cy.visit()
前一页 cy.reload()

打字稿错误

body.width() --> TS2532: Object is possibly 'undefined'

可以使用

修复

body!.width()   // telling typescript that we know body exists

Answer 2

您可以使用 .contains() 命令而不是所有 .get() 命令来简化您的代码。

假设您没有任何其他元素带有 data-test-id="popup" 和时间文本或 div[data-test-id="popup" 中的任何嵌套 data-testid="popup"，那么这将适用于桌面和移动设备这是它的样子。

cy.contains('[data-test-id=popup]', time) 
  .should('exist')
  .should('have.text', time);

选择器根据移动设备与桌面设备中的索引而变化。如何在赛普拉斯中处理断言

Selector changes by an index in Mobile vs Desktop. How to handle assertion in Cypress

typescript

cypress