如何对接 NX cypress e2e 应用程序

Posted

技术标签:

【中文标题】如何对接 NX cypress e2e 应用程序【英文标题】:How to dockerize an NX cypress e2e application 【发布时间】:2021-11-14 08:04:01 【问题描述】:

我有一个 NX 工作区,其中仅包含一个 Angular 应用程序及其使用 cypress 的 e2e 应用程序。

我正在尝试为 e2e 测试创建一个 docker 映像,但是当我运行 docker 容器时它失败了。 这是我的Dockerfile,现在位于工作区的根文件夹中。

FROM node:lts-alpine
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
COPY decorate-angular-cli.js /app/decorate-angular-cli.js
RUN npm install
RUN npm install -g @angular/cli@latest
RUN npm install reflect-metadata tslib
# add cypress dependencies for image build 
RUN apk add xauth xvfb

# add app
COPY . /app
CMD npm run e2e -- --headless

映像已构建,但当我运行容器时出现 cypress 依赖项错误。

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |  11.33 MB
styles.css          | styles        | 685.68 kB
polyfills.js        | polyfills     | 128.53 kB
main.js             | main          | 118.15 kB
runtime.js          | runtime       |   6.61 kB

| Initial Total |  12.25 MB

Build at: 2021-09-20T15:27:50.264Z - Hash: 8cbcb444b6a50b421afd - Time: 86112ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
It looks like this is your first time using Cypress: 7.7.0

[STARTED] Task without title.
[FAILED] Cypress failed to start.
[FAILED]
[FAILED] This may be due to a missing library or dependency. https://on.cypress.io/required-dependencies
[FAILED]
[FAILED] Please refer to the error below for more details.
[FAILED]
[FAILED] ----------
[FAILED]
[FAILED] Command failed with ENOENT: /root/.cache/Cypress/7.7.0/Cypress/Cypress --no-sandbox --smoke-test --ping=690
[FAILED] spawn /root/.cache/Cypress/7.7.0/Cypress/Cypress ENOENT
[FAILED]
[FAILED] ----------
[FAILED]
[FAILED] Platform: linux (Alpine Linux - 3.11.12)
[FAILED] Cypress Version: 7.7.0
Cypress failed to start.

This may be due to a missing library or dependency. https://on.cypress.io/required-dependencies

Please refer to the error below for more details.

----------

Command failed with ENOENT: /root/.cache/Cypress/7.7.0/Cypress/Cypress --no-sandbox --smoke-test --ping=690
spawn /root/.cache/Cypress/7.7.0/Cypress/Cypress ENOENT

----------

Platform: linux (Alpine Linux - 3.11.12)
Cypress Version: 7.7.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! icert@2.0.0 e2e: `ng e2e "--headless"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the icert@2.0.0 e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-09-20T15_27_51_378Z-debug.log

我需要知道这是否是使用 Nx 对 e2e 应用程序进行 dockerizing 的正确方法,如果是,那么我在这里缺少什么。

谢谢!

【问题讨论】:

【参考方案1】:

问题在于 Alpine Linux 尚不支持赛普拉斯(或者可能永远不支持)。我建议您改用officially supported Cypress Docker images 之一。即使你设法让 Cypress 在 Alpine 上运行,它也需要下载大量外部依赖项来构建 Chrome/Electron,这将使磁盘大小优化可以忽略不计。

【讨论】:

好的!但是在我的 Nx 工作区中使用 docker 图像时,我遇到了很多错误,因为我为每个应用程序单独安装了 cypress。你有什么资源可以帮助我吗?

以上是关于如何对接 NX cypress e2e 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

如何通过命令行在 cypress.json 文件中设置环境变量? (Angular CLI - nrwl nx)

ReactJS + Cypress E2E 测试

使用 cypress.io 模拟 s-s-r 反应应用程序 e2e 测试的服务器

运行 e2e 测试时在 cypress 中模拟特定的 graphql 请求

为啥 nrwl nx 为每个应用程序创建一个单独的 e2e 项目?

cypress初探