当这些元素位于具有更高 z-index 的 div 下时，如何使用测试库 findByText() 查找元素？

Question

我的团队正在使用 react-joyride 在我们的 react 应用程序中进行功能浏览。本质上，react-joyride 在整个 DOM 上覆盖了具有非常高 z-index 和半透明 (rgba(0, 0, 0, 0.3)) 颜色的 <div>。这具有使页面显示 'faded' 并使其不可交互的效果（其他几个 <div>s 用于突出显示页面的一小部分并呈现工具提示）。

我正在使用 @testing-library/cypress 为这个功能之旅编写集成测试。使用 cy.get()，我可以 select DOM 元素在兜风 <div> 下，但 findByText() 总是失败 Unable to find an element with the text。我尝试了一些方法，none 其中有效：

findByText(content)

const pageContainer = cy.get('div#pageContainer')
pageContainer.findByText(content)

const pageContainer = cy.get('div#pageContainer')
pageContainer.within(() => findByText(content))

有没有我遗漏的选项？像 findByText(content, { hidden: true } 这样的东西？我能理解为什么 testing-library/cypress 认为找不到元素，因为在它们上面还有另一个 <div>，但是元素在字面意义上是可见的，我想强制 findByText() 找到他们...

对于一些额外的内容，在我们的 package.json:

"@testing-library/cypress": "^6.0.0"
"cypress": "4.10.0"
"react-joyride": "^2.2.1"

我们的 cypress.json:

{
  "chromeWebSecurity": false,
  "defaultCommandTimeout": 15000,
  "nodeVersion": "system",
  "screenshotOnRunFailure": false,
  "trashAssetsBeforeRuns": false,
  "video": false,
  "viewportHeight": 1200,
  "viewportWidth": 1920,
  "watchForFileChanges": false
}

我们用一个简单的 cypress open.

启动 cypress

Answer 1

如果它在 DOM 中，findByText 会找到它。你确定文本存在吗？它坏了吗？如果你做类似的事情，

const world = "World"

<div>Hello {world}</div>

它将在 DOM 中呈现为单独的文本片段，因此 findByText(/Hello World/) 将什么也没有返回。

Answer 2

您的应用配置可能有问题。

查看 react-joyride 演示页面，joyride 元素是实际应用页面的兄弟姐妹，而不是（除非我误读了您的描述）

<body>

  <div id="root">
    // app being demo'd is here 
  </div>

  <div id="react-joyride-portal">
    // joyride overlay is here
  </div>

  <div id="react-joyride-step-1">
    // joyride controls are here
  </div>

</body>

运行以下所有作品（unchained除外findByText(content)）

it(''finds "V2"'', () => {

  cy.visit('https://react-joyride.com/')

  /* Move to first step */

  cy.contains('button', 'Start').click()
  cy.contains('button', 'Next (1/5)').click()
  cy.contains('div#react-joyride-step-1', 'Next (2/5)')

  /* Find some page content */

  const content = 'V2'

  cy.contains('span', content)
  cy.get('div.star-burst span').contains(content)

  cy.get('div#root').contains(content)

  cy.get('div#root').findByText(content)

  const pageContainer = cy.get('div#root')
  pageContainer.findByText(content)
  // pageContainer.within(() => findByText(content))   // fails, invalid syntax
  pageContainer.within((container) => cy.wrap(container).findByText(content))

})

查找“我们的项目”

it('finds "OUR PROJECTS"', () => {

  cy.visit('https://react-joyride.com/')

  /* Move to first step */

  cy.contains('button', 'Start').click()
  cy.contains('button', 'Next (1/5)').click()
  cy.contains('div#react-joyride-step-1', 'Next (2/5)')

  /* Find some page content */

  const content = 'OUR PROJECTS'

  cy.contains('body', content)

  cy.get('div.demo__section.demo__projects').contains(content)

  cy.get('h2').contains(content)

  cy.get('div#root').findByText(content)

  const pageContainer = cy.get('div#root')
  pageContainer.findByText(content)
  pageContainer.within((container) => cy.wrap(container).findByText(content))

})

当这些元素位于具有更高 z-index 的 div 下时，如何使用测试库 findByText() 查找元素？

How can I find elements using testing-library's findByText() when those elements are under a div with a higher z-index?

reactjs

cypress

react-testing-library