npm - 在 cypress js 上运行测试之前提供 SPA

Question

使用 Cypress，我可以轻松测试我的开发子域。我有一个角度/反应应用程序，当我制作dist（包括index.html）时，我想对构建的文件运行赛普拉斯测试。

不幸的是，在开始赛普拉斯测试之前，我不知道如何提供dist文件夹（如servepackage of ）。npm

我知道我可以index.html在另一个终端选项卡上提供服务，但这不会在 CircleCi（我的 CI）上发生。

无论如何，赛普拉斯可以在开始实际测试之前替换本地主机并提供​​静态文件吗？

Answer 1

我曾经browser-sync启动一个分发我的静态文件的服务器。

您需要安装 3 个软件包：（cypress显然），browser-sync启动服务器，并npm-run-all连续启动服务器和 cypress。

npm install --save-dev cypress
npm install --save-dev browser-sync
npm install --save-dev npm-run-all

这是一个 npm 脚本配置示例，您需要在package.json. 不要忘记自定义<port>（例如：4000）并<folder>包含您的 SPA 的路径（例如：public）。

{
  "scripts": {
    "cypress": "cypress run",
    "server": "browser-sync start --port <port> --server <folder> --no-open",
    "test": "run-p -r server cypress"
  }
}

现在你必须编写你的第一个Hello world测试：

describe('My App', function() {
    it('is up', function() {
        cy.visit('http://localhost:4000');

        cy.contains('Hello world!');
    });
});

而已！我们可以启动我们的测试：

npm test

Answer 2

我做了以下事情：

我安装了

npm i serve

并添加

serve: "serve -s <build-folder>"

到我的package.json. 然后在您的例如 travis.yml 中添加

- npm run serve & 
- npm test

&命令末尾的 将使它在后端运行，因此测试可以在它之后运行。由于serve提供静态文件的速度非常快，因此也无需npm test等待，而且您不必担心npm run serve事后停止，因为大多数 CI 环境会在您的测试完成后自动清理后台进程。

上面的大部分信息也可以在这里找到。