Cypress 自动化测试：如何在多个浏览器中执行一次测试？-JavaScript中文网-JavaScript教程资源分享门户

Cypress 是一个基于 JavaScript 的自动化测试框架，它让前端测试相关工作更简单高效。然而，有时候我们需要在多个浏览器下测试我们的应用程序，它该如何解决呢？本文将介绍如何使用 Cypress 在多个浏览器中执行一次测试。

设计思路

在 Cypress 中，我们可以使用不同的浏览器进行测试，包括 Chrome、Firefox、Edge 等。在不同的浏览器中执行测试需要考虑以下两个方面：

如何选择并加载指定的浏览器。
如何配置测试运行环境，以使测试用例能够在加载的浏览器下进行测试。

有两种方式来实现这一功能：一种是使用 Cypress 已经提供的实验性功能；另一种则是借助第三方工具实现多浏览器测试。

实验性功能

Cypress 可以使用不同的浏览器进行测试

Cypress 对使用实验性功能有详细的文档说明，需要使用实验性功能的开发者可以上文档中查找和了解具体的方案和 API。

Cypress CLI 正在开发的一个实验功能，通过命令 cypress run --browser chrome 可以运行测试用例时指定使用的浏览器。具体用法如下：

$ npx cypress run --browser chrome

这将利用 Chrome 浏览器来运行 Cypress 测试。我们还可以使用以下命令行指定其他浏览器的使用，例如

Firefox: npx cypress run --browser firefox
Edge: npx cypress run --browser edge

需要注意本文档强调的是实验性功能，需要小心处理使用实验性功能生成的风险。

第三方工具

在 Docker 中运行 Cypress 测试

第三方工具的思路是在 Docker 容器中为不同的浏览器配置不同的测试环境，从而在多个浏览器中执行同一次 Cypress 测试。

使用这个方案，您需要为每个浏览器创建一个 Docker 容器。下面是如何为不同浏览器创建 Docker 容器的步骤：

下载所需的 Docker 镜像；
创建新的自定义 Docker 镜像，该镜像基于所需的 Docker 镜像并包含 Cypress；
启动新容器，运行 Cypress。

下面是如何为 Chrome 创建 Docker 镜像的示例。

首先，您可以使用以下命令下载 Chrome Docker 镜像：

$ docker pull selenium/standalone-chrome

接下来，请使用以下 Dockerfile 创建新的 Docker 镜像：

// javascriptcn.com 代码示例
FROM selenium/standalone-chrome

ARG CYPRESS_VERSION="6.*"

RUN npm config set progress false && \
    npm install --ignore-scripts --no-cache-dir --loglevel error -g "cypress@${CYPRESS_VERSION}" && \
    npm cache clean --force && \
    $(npm bin)/cypress verify && \
    rm -rf ~/.cache/Cypress

ENV CYPRESS_BASE_URL=

ENTRYPOINT ["/sbin/tini", "--"]
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

在 Dockerfile 中，我们从 Selenium/Chrome 镜像构建了一个新的自定义镜像。这个自定义镜像是基于 Chrome 镜像，并包含 Cypress。我们还使用 supervisor 来管理多个并行进程。

最后，运行以下命令启动 Docker 容器：

$ docker run -it --rm --shm-size=1g --memory=4g \
    -e CYPRESS_baseUrl=http://localhost:3000 \
    -v $PWD:/e2e \
    -w /e2e \
    --entrypoint cypress \
    cypress/included:6.1.0 \
    run --headless --browser chrome --spec 'tests/spec/**/*.spec.js'

运行该命令将启动新的 Docker 容器来运行 Cypress 测试。我们正在使用 Cypress 包含的 Chrome 浏览器来运行测试。您可以根据需要调整用于启动 Docker 容器的命令行选项，详细说明关于以下内容。

--rm：一旦容器关闭，Docker 将删除它；
--memory：容器可以使用的内存量；
--shm-size：用于共享内存的大小；
-e：设置环境变量，例如 URL 地址；
-v：挂载一个本地目录，并在容器内部访问它；
-w：设置当前工作目录；
--entrypoint：设置容器启动时要执行的脚本或命令。

总结

在本文中，我们介绍了 Cypress 如何在多个浏览器中执行测试用例的两种方案。Cypress 提供了实验功能来在不同的浏览器中运行测试，同时也可以通过 Docker 对于多种浏览器生产不同的测试环境。

无论使用哪种方案，都需要详细了解其原理和细节，以确保可靠性和稳定性。了解了方案后，我们相信您将能够根据应用的需求选择适当的方案，并将其成功应用到您的开发工作中。

示例代码

一个使用 Docker 实现在 Chrome 中运行测试用例的示例可以在下面找到。

终端一：

// javascriptcn.com 代码示例
$ git clone git@github.com:cypress-io/cypress-docker-images.git
$ cd cypress-docker-images
$ docker build -t cypress-docker-image .
$ cd -
$ docker run -it --rm \
  -e CYPRESS_baseUrl='http://host.docker.internal:3000' \
  -e CYPRESS_record=false \
  -e CYPRESS_key='asdf-1234' \
  -v $PWD:/cypress/tests \
  -w /cypress/tests \
  cypress-docker-image \
  cypress run --headless --browser chrome --spec 'cypress/integration/examples/**/*.spec.js'

终端二：

$ npm run dev

// cypress/integration/examples/hello_world.spec.js
describe('Hello world', () => {
  it('Can visit the origin', () => {
    cy.visit('/')
    cy.contains('Hello, world!').should('exist')
  })
})

// views/App.vue
<template>
  <div id="app">
    <p>Hello, world!</p>
  </div>
</template>

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