Cypress中如何实现横向区域向右滚动一整屏

Cypress 所有命令采用异步队列机制执行，你代码里给width赋值拿到的不是实际宽度数值，是Cypress的Chainable链式对象，所以传入scrollTo时参数无效，才会出现滚动执行时宽度还没拿到的问题。

正确实现代码 #

把取值、滚动逻辑放在同一条执行链中，通过.then()拿到前序命令执行后的真实返回值，再触发滚动：

// 推荐写法：仅查询一次DOM，性能更好
cy.getCy("scroll-viewport").then($viewport => {
  const viewportWidth = $viewport.width()
  cy.wrap($viewport).scrollTo(viewportWidth, 0)
})

// 等价链式写法
cy.getCy("scroll-viewport")
  .invoke("width")
  .then(viewportWidth => {
    cy.getCy("scroll-viewport").scrollTo(viewportWidth, 0)
  })

适配你的横向虚拟滚动场景 #

针对你说的滚动后旧元素a/b销毁、新元素c/d渲染的场景，滚动执行后可直接加断言验证逻辑：

cy.getCy("scroll-viewport").then($viewport => {
  const viewportWidth = $viewport.width()
  cy.wrap($viewport).scrollTo(viewportWidth, 0)
})

// 验证旧元素已销毁
cy.get("a").should("not.exist")
cy.get("b").should("not.exist")
// 验证新元素已正常渲染
cy.get("c").should("be.visible")
cy.get("d").should("be.visible")

复用封装 #

如果用例里需要多次执行横向整页滚动，可以封装为自定义命令减少重复代码：

// 在cypress/support/commands.js中注册自定义命令
Cypress.Commands.add("scrollHorizontallyByFullPage", () => {
  cy.getCy("scroll-viewport").then($viewport => {
    const width = $viewport.width()
    cy.wrap($viewport).scrollTo(width, 0)
  })
})

// 用例中直接调用即可，需要滚动多屏就多次调用
cy.scrollHorizontallyByFullPage()

内容的提问来源于stack exchange，提问作者manymanymore