@4tw/vue-cli-plugin-cypress-django 中文文档教程

Question

vue-cli-plugin-cypress-django

使用 cypress 和 django 进行集成测试。

Setup

yarn add --dev @4tw/vue-cli-plugin-cypress-django

Prerequisite

该插件需要 cypress 二进制文件。 https://www.npmjs.com/package/cypress

Usage

manage.py

该插件能够与 django 服务器和数据库进行交互。 因此，在执行测试时提供 djangopath 很重要。 djangopath 应该是项目的根目录。 该插件假设有一个 manage.py 来与 django 服务器交互。

database

需要在项目根目录下提供以下数据库脚本 所以插件可以正确地与数据库交互：

• bin/e2e_setup_db (create and fill database before tests are executed)
• bin/e2e_reload_db (reset database for isolation)
• bin/e2e_teardown_db (cleanup database)

脚本正在做什么取决于你，但他们应该实现的目标是 在上面的列表中描述。

数据库名称在执行期间作为第一个参数 $1 提供。

可以导入和创建数据库以与之交互。

const Database = require('@4tw/vue-cli-plugin-cypress-django/database');

const database = new Database({ djangopath, DJANGO_DATABASE_NAME });

database.reset()

重置数据库。

database.drop()

删除数据库。

database.load(dataset)

在测试期间加载数据。 dataset 是 django-fixture 的名称。

这些交互通常在 cypress 任务中完成：https://docs.cypress.io/api/commands/task.html#Syntax 因此可以在设置和拆卸挂钩中调用它们：

module.exports = (on, config) => {
  on('task', {
    djangoTestSetup({ test, gever }) {
      database.reset();
    },
    loadData(dataSet) {
      return database.load(dataSet);
    },
  });
  return config;
};

django management commands

如果应在“每次测试”的基础上加载特定数据，则需要管理命令 load_e2e_data。 该命令应接受一个可选参数：--datasets。

该命令可以访问 BACKEND_PORT（服务器当前运行的端口）。 示例：os.environ.get("BACKEND_PORT", 8000)。

Interactive mode

交互模式使您能够在 cypress electron 应用程序中运行端到端测试。 这最适合开发，因为在更新生产或测试代码时您可以进行热重载。 测试完成后，您还可以与应用程序进行交互。

vue-cli-service test:django:e2e --djangopath=/path/to/django/root

Headless mode

headless 模式在后台运行测试。 这最适合在集成服务器上的管道中运行测试。

vue-cli-service test:django:e2e --djangopath=/path/to/django/root --headless

Specifying test files to run

如果您只想在无头模式下运行选定的测试文件而不是运行所有测试，请使用 --spec 指定文件的路径。 然后将其传递给赛普拉斯（参见 https://docs.cypress.io/guides/guides/command-line.html#cypress-run-spec-lt-spec-gt）。

vue-cli-service test:django:e2e --headless --spec=tests/e2e/specs/some.spec.js

Using a .env file

您可以指定一种模式，该模式会加载相应的 .env.[mode] 文件，该文件允许您指定环境变量。

vue-cli-service test:django:e2e --djangopath=/path/to/django/root --mode testing_e2e

上面的示例将查找名为 .env.testing_e2e 的文件并获取此文件中指定的环境变量。

Without runserver

默认情况下，后端服务器使用 Django 的 python manage.py runserver 命令启动。

如果你想防止这种情况并针对已经运行的后端运行测试（例如开始使用 uwsgi），你可以设置 --runserver=false。 在这种情况下，您需要使用环境变量 BACKEND_PORT 显式传递后端服务器的端口。

vue-cli-service test:django:e2e --djangopath=/path/to/django/root --runserver=false

Environment variables

可以使用以下（可选）环境变量：

• DJANGO_E2E_DATABASE_NAME: The name of the database used by django. Defaults to E2E_TESTING_34000
• DJANGO_PYTHON_PATH: The path to the python binary used by django. Defaults to 'bin/python', '.tox/py36/bin/python', 'python'
• DJANGO_CONFIGURATION: The name of the django settings class. Defaults to 'TestingE2E'
• DJANGO_MEDIA_ROOT: Optional: path to the django media root. Defaults to null.
• BACKEND_PORT: The port used by django. Defaults to 34000
• FRONTEND_PORT: The port used by vue. Defaults to 35000
• CYPRESS_PORT: The port used by cypress. Defaults to 36000
• HEARTBEAT_PATH: The frontend server will only start once the backend server is ready. A relative URL is requested repeatedly to check if the backend server is ready yet, using a HTTP HEAD method and waiting for a 200 or 302 status code. Defaults to /
• CYPRESS_CONFIG: Override Cypress options, passed as a string as --config when running Cypress (https://docs.cypress.io/guides/references/configuration.html#Overriding-Options). Defaults to '' (baseUrl=http://localhost:[PORT2] is always passed)