解决 Cypress 访问本地环境时遇到的 ERR_CONNECTION_REFUSED 错误-JavaScript中文网-JavaScript教程资源分享门户

问题背景

我们在开发前端项目时，经常需要使用 Cypress 进行 e2e 测试。但是，当我们要访问本地环境时，很容易遇到一个错误：ERR_CONNECTION_REFUSED。这种错误通常会让我们束手无策，难以进行测试。

解决方案

原因分析

我们要先了解这个错误的原因。通常情况下，出现 ERR_CONNECTION_REFUSED 错误的原因是因为 Cypress 默认使用了 Chrome 浏览器，这个浏览器是基于 Chromium 的，因此它遵循了同源策略（Same Origin Policy）。这就意味着，Cypress 不能够直接访问我们本地环境的 URL。所以，我们需要进行一些配置，才能够让 Cypress 访问我们的本地环境。

配置步骤

1. 安装 Cypress-iframe

Cypress-iframe 是一个 Cypress 插件，可以帮助我们轻松地处理基于 iframe 的网页。首先，我们需要安装 Cypress-iframe：

npm install -D cypress-iframe

2. 在 Cypress 的 index.js 文件中，添加如下代码：

-- -------------------- ---- -------
-------------------------
------------------------------ - ------------ --------- -- --------- --------- -- -
  -------------
    ----- ---------
    -------- ---------
  ---
  ------ --- ----------------------- -- -
    ------------- -- -
      -------------------------------------------
    -- ---
  ---
---

这段代码增加了一个 Cypress 命令，可以让我们访问 iframe 内部的 HTML 元素。

3. 设置 Cypress 的 baseUrl

我们需要告诉 Cypress 我们的测试网站的 URL。这可以通过打开 Cypress 的配置文件（cypress.json）并添加如下代码来实现：

{
  "baseUrl": "http://localhost:3000"
}

注意：这里的端口号需要根据你的项目设置而定。

4. 在 Cypress 的测试用例中，使用 iframe 命令

最后，我们可以使用 Cypress 的 iframe 命令来访问被 iframe 包含的网页。例如：

describe('访问本地环境', () => {
  it('应该成功访问本地首页', () => {
    cy.visit('/')
    cy.iframe('iframe[name=localIFrame]').find('#localElement').should('have.text', 'This is a local element.')
  })
})

这段代码首先访问了我们的本地页面，然后使用了 Cypress 的 iframe 命令，选择了一个名为 localIFrame 的 iframe，并查找了它内部的 id 为 localElement 的元素。我们还可以加入其他断言或是操作，以执行我们需要的测试。

完整示例代码

-- -------------------- ---- -------
-- ------------------------
-------------------------
------------------------------ - ------------ --------- -- --------- --------- -- -
  -------------
    ----- ---------
    -------- ---------
  ---
  ------ --- ----------------------- -- -
    ------------- -- -
      -------------------------------------------
    -- ---
  ---
---

-- ------------
-
  ---------- -----------------------
-

-- ---------------------------------
------------------ -- -- -
  ---------------- -- -- -
    -------------
    ------------------------------------------------------------------------------- ----- -- - ----- ----------
  --
--

总结

本文介绍了如何解决 Cypress 访问本地环境时遇到的 ERR_CONNECTION_REFUSED 错误。通过安装 Cypress-iframe 和对 Cypress 进行一些调整，我们可以轻松地访问本地环境，并执行我们所需的测试。我们希望这篇文章可以帮助到所有需要使用 Cypress 进行本地测试的前端开发者。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64acc98c48841e98948ced3c