解决 Cypress 在 Safari 中无法找到元素的问题-JavaScript中文网-JavaScript教程资源分享门户

前言

Cypress 是一个非常好用的前端自动化测试框架，支持多种常见浏览器，如 Chrome、Firefox 等等。但是在使用 Cypress 进行 Safari 浏览器的自动化测试时，可能会遇到无法找到元素的问题，本文将分享如何解决这一问题。

问题描述

假设我们有一个简单的测试用例，需要在一个输入框中输入一些文字，然后点击按钮：

it('should input some text and click the button', () => {
  cy.get('input[name="text"]').type('some text')
  cy.get('button[type="submit"]').click()
})

在 Chrome 浏览器中，这个测试用例可以正常工作，但是在 Safari 浏览器中，Cypress 无法找到输入框和按钮，报错信息如下：

Timed out retrying: Expected to find element: 'input[name="text"]', but never found it.

此时我们需要寻找解决问题的方法。

步骤

步骤一：确认 Safari 浏览器版本

首先，需要确认 Safari 浏览器的版本，Cypress 官方提供了 Safari 支持版本列表，确认浏览器版本是否在支持范围内。

步骤二：升级 Cypress 版本

Cypress 最新版本可能会解决一些已知问题，建议先升级到最新版本，可以通过下面的命令进行升级：

npm install cypress@latest

步骤三：将 Safari 浏览器切换到“开发者”模式

在 Safari 浏览器中，选择“偏好设置 - 高级”，勾选“在菜单栏中显示开发者菜单”，然后在菜单栏中选择“开发者 - 允许远程自动化”。

步骤四：配置 Cypress

修改项目中的 cypress.json 配置文件，添加 Safari 相关配置：

// javascriptcn.com 代码示例
{
  "baseUrl": "http://localhost:3000",
  "testFiles": "**/*.spec.js",
  "browsers": [
    {
      "name": "chrome",
      "family": "chromium"
    },
    {
      "name": "firefox",
      "family": "firefox"
    },
    {
      "name": "safari",
      "family": "safari",
      "channel": "stable",
      "config": {
        "useTechnologyPreview": false,
        "allowHttpAuthorization": true,
        "experimentalWebkitFeatures":true,
        "webkitWebSecurity":false
      }
    }
  ]
}

以上是一个示例配置，在 Safari 相关配置中，特别需要注意的是 "webkitWebSecurity":false，这是因为 Safari 要求必须使用 HTTPS 协议才能进行自动化测试，但是在本地开发环境下使用的是 HTTP，因此需要关闭同源限制。

步骤五：执行测试用例

重新执行测试用例，看看是否能够正常运行。

总结

Cypress 在 Safari 中无法找到元素的问题，可能是因为 Safari 浏览器版本不支持、Cypress 版本过低或者 Safari 浏览器没有开启“开发者”模式。如果以上方案都没有解决问题，可以尝试使用其他浏览器进行测试。正确地解决这个问题，可以有效提高自动化测试效率和测试用例的稳定性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654571377d4982a6ebf20b97