javascript - Cypress - 始终将元素聚焦到屏幕顶部的给定偏移量

Question

当我在 Cypress 中运行测试时，它总是向下滚动到元素，因此它位于屏幕的最顶部。但我正在为 WordPress 系统编写测试，其中固定栏始终位于屏幕顶部，占用 75 像素(ish)。所以当我的测试运行时，我永远看不到发生了什么。
有没有一种方法，我可以为所有测试定义所有元素，以便当它们成为焦点时，它们距离顶部 200 像素？像一个全局常量？
代码

cy.get( 'tr[data-slug="cmb2"]' ).should( 'have.class', 'active' );

在此处查看问题:


解决方法一:设置在 .env配置文件
如果我可以在 cypress.json 中设置它会很聪明-文件。我阅读了 Cypress Configuration 上的文档，但在里面找不到。

解决方案尝试 2:使用 CSS 隐藏管理栏
在后端运行 Cypress 测试时，我还可以尝试添加样式表以始终加载。但这是绕过它的正常方法吗？
即使我这样做了，我也不知道该怎么做。

解决方案尝试 3:使用 scrollIntoView
我尝试添加 scrollIntoView有一些选择:

cy.get( 'tr[data-slug="cmb2"]' ).scrollIntoView({ offset: { top: 150, left: 0 } }).should( 'have.class', 'active' );

但是当我悬停它时，我仍然看不到我的 div 的标题。我也试过 the solution suggested here看起来有点像。

解决方案尝试4:添加 scrollBehavior给我的 .env -文件
我将其添加到我的 .env -文件:

{
   "env": {
      "name": "staging",
      ...
   },
   "viewportWidth": 1100,
   "viewportHeight": 1800,
   "watchForFileChanges": false,
   "chromeWebSecurity": true,
   "scrollBehavior": "bottom"   <---- My attempt!
}

但没有雪茄:


相关问题

Cypress scrolling behaviour on get and relative positionning

Answer 1

我不确定您的 Wordpress 网站，但以下内容适用于 Cypress scrolling behaviour on get and relative positionning 中引用的 Material-UI 网站
.scrollIntoView() 偏移量应为负

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})
}) 

使用原生 scrollIntoView

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  cy.contains('Elvis Presley')
    .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom
})

使标题透明

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.get('header').invoke('css', 'opacity', '0')
  cy.contains('Elvis Presley').scrollIntoView()
})

使用 .scrollTo()
此命令适用于滚动容器，而不是您定位的元素，因此定位可能不会每次都正确显示。

function getScrollParent(node) {
  if (node == null) return null;

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley')
    .then($el => {
      const scrollParent = getScrollParent($el[0])
      cy.wrap(scrollParent).scrollTo('center')
    })
})