Cypress 是一款流行的前端端到端测试框架，在测试中与 DOM 元素的交互十分重要。通常情况下，DOM 元素可以使用 jQuery 选择器进行操作，但在 Cypress 中，可能会遇到一些问题。
其中最常见的问题之一是 $ 未定义错误。虽然这不是 Cypress 的错误，但它经常会在 Cypress 中进行 DOM 操作时出现。那么，这是如何解决的呢？
原因
Cypress 使用了自己的内部库来操作 DOM 元素，而不是使用全局的 window 和 document 对象。因此，在 Cypress 中引入 jQuery 库只是为了使用其选择器而已，这时候 $ 是不会被定义的。
解决方案
使用 Cypress.$
由于在 Cypress 中 $ 是未定义的，在选择器中使用 $ 将会抛出错误。但是，Cypress 提供了自己的 $ 方法，可以实现与 jQuery 类似的效果。此方法接受一个选择器并返回与 jQuery 相同的 DOM 元素。下面是一个使用 Cypress.$ 的示例：
------------------------ -- - ----- ----- - -------------- --
在 Cypress 中使用 jQuery
如果您想继续使用 jQuery，可以通过以下几个步骤在 Cypress 中加载 jQuery：
- 下载 jQuery 库
- 在 cypress/support/index.js 文件中添加以下代码：
----- - - -----------------
------------------------------ ---------- -------- -- -
------ ----------------------- -- -
----- --- - ----------- ---------------- --------
------ --- ----------------------- -- -
------------ -- -
------------
--
--
--
--- 在测试中使用
$，例如：
--------------------------- -- - -- -- --- -- --
禁用 cypress-jquery
Cypress 也有一个名为 cypress-jquery 的第三方库，它可以覆盖 Cypress 默认的 DOM 操作方法。如果您安装了该库，可能会导致 $ 未定义的错误。为了解决这个问题，请禁用 cypress-jquery 库。在 cypress/plugins/index.js 文件中添加以下代码：
-------------- - ---- ------- -- - -------------------- - ----- -
结论
在 Cypress 中使用 jQuery 会遇到 $ 未定义错误的问题，但是这个问题有多种解决方案。您可以使用 Cypress.$ 来代替 $，也可以在 Cypress 中使用 jQuery，或者禁用 cypress-jquery。这些方案将帮助您解决这个问题并让您的测试更加稳定可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b5ad19babaf620faae8fe