document.querySelector 对比 cy.get

Question

我刚开始使用 cypress 从 Microsoft Dynamics NAV Business Central 测试 Web 客户端。它具有非常复杂的 div 结构的动态 ID。

我对如何识别特定输入控件的最佳猜测是使用 aria-label 对其进行过滤。

当我做的时候 document.querySelector('[aria-label^="MyLabel"]')

我得到了 return 中的元素。当我尝试 cy.get('[aria-label^="MyLabel"]')

找不到任何内容。我期待太多了吗？我也试过了

cy.get('input[type=text]')

虽然页面上有几个文本输入字段，但它 return什么也没有。

感谢您的input/help

更新：这是我要查找的元素，但由于 Dynamics 阻止它，我无法复制整个 HTML 代码

<input class="cursorinherit stringcontrol-edit thm-cont-u1-font-size thm-cont-u1-font-stack thm-cont-u1-color-2--maxflat thm-cont-s1-bdrcolor--focus thm-cont-s1-outlinecolor--focus thm-cont-h1-bdrcolor--hover thm-cont-h1-bdrcolor--prev-sib-hover" type="text" spellcheck="false" maxlength="30" aria-label="Paketverfolgungsnr., (Leer)" id="C4ee" title="" autocomplete="autocomplete-off">```

Answer 1

两种获取元素的方式有不同的用法

document.querySelector()

const inputEl = document.querySelector('[aria-label^="MyLabel"]')
console.log(inputEl)
expect(inputEl).to...

这是一个同步调用，returns 将单个元素放入变量中，然后您可以直接使用它。

cy.get()

这是一个异步 Cypress 命令，returns 一个或多个必须在 then() 回调中使用的元素，

cy.get('[aria-label^="MyLabel"]').then($inputEl => {
  const inputEl = $inputEl[0]
  console.log(inputEl)
  expect(inputEl).to...
})

这看起来很笨重，但是当元素本身是异步的（例如由 API 调用填充）时这是必要的，因为 Cypress 命令会重复直到元素到达页面。

相比之下，如果在查询运行.

时元素不存在，document.querySelector('[aria-label^="MyLabel"]') 将失败

多个元素

另请注意，该命令可以一次获取多个元素，因此您可以同时处理或单独处理

cy.get('input[type=text]').then($inputEls => {
  const inputEls = [...$inputEls]
  console.log(inputEls)                  // show all
  expect(inputEls).to...
})

或

cy.get('input[type=text]').each($inputEl => {
  const inputEl = $inputEl[0]
  console.log(inputEl)                   // show individually
  expect(inputEl).to...
})

Answer 2

看了 HTML DOM div by div 之后（感觉至少有很多）我意识到在中间包括 Microsoft Dynamics一个 iframe。这导致我在 cypress 中的请求失败，而 Chrome 控制台以某种方式设法找到项目，而不管 iframe。

我查找了一些使用 iframe 文档的代码，然后找到了输入元素。感谢您的帮助！

document.querySelector 对比 cy.get

document.querySelector vs. cy.get

cypress

microsoft-dynamics