通过 Playwright 和 Cucumber 集成增强您的 ETests

介绍

在这篇文章中，我将向您介绍为什么 Playwright 和 Cucumber 是端到端 (E2E) 测试的出色工具。然后，我们将深入探讨集成 Playwright 以在 JavaScript 前端应用程序中无缝使用的步骤。最后，我将分享一些专业技巧，以最大限度地提高您与 Playwright 的效率。

为什么是剧作家和黄瓜？

虽然有许多强大的工具可用于构建 E2E 测试套件，但没有一个能与 Playwright 和 Cucumber 的协同作用相媲美。

以下是 Playwright 在编写 E2E 测试的市场中脱颖而出的原因，仅举几例：

• 1.任何浏览器、任何平台、一个 API
  • a.跨浏览器。 Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。
  • b.跨平台。在 Windows、Linux 和 macOS 上进行本地或 CI 测试，无头或有头。
  • c.跨语言。在 TypeScript、JavaScript、Python、.NET 和 Java 中使用 Playwright API。
• 2.有弹性，没有不稳定的测试
  • a.自动等待。剧作家在执行操作之前等待元素可操作。
  • b.网络优先的断言。剧作家断言是专门为动态网络创建的。
• 3.强大的工具
  • a.代码生成器。通过记录您的操作来生成测试。以任何语言保存它们。
  • b.剧作家监察员。检查页面、生成选择器、逐步执行测试、查看点击点并探索执行日志。

但是，如果没有 Cucumber 管理测试代码可能会成为维护的噩梦。 Cucumber 有助于以简单、人类可读的语言编写测试，甚至使非技术利益相关者也可以访问它们。作为行为驱动开发 (BDD) 的基石，Cucumber 充当技术文档并加速新工程师的入职。

剧作家与黄瓜的融合

第 1 步：安装依赖项

使用npm或yarn安装必要的包。

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

第 2 步：设置项目结构

像这样组织你的项目：

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

第三步：配置黄瓜

在项目根目录中创建一个 Cucumber 配置文件 - cucumber.js 文件，其中包含以下内容：

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

第 4 步：配置测试报告

创建 cucumber.report.js - 用于配置测试报告的文件。配置选项可以在这里找到

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

第5步：编写特征文件

在features目录下创建一个feature文件，例如example.feature:

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

第 6 步：编写步骤定义

在steps目录中创建一个步骤定义文件，例如example.steps.js：

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

第7步：添加NPM测试脚本

将脚本添加到 package.json 来运行测试：

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

同时，npm 包是一个方便的工具，可让您在同一测试中执行两个进程，为了执行 E2E 测试，您还需要运行应用程序，有时在本地，有时在远程。

第 8 步：运行测试

执行测试：

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

剧作家专业技巧

• 1.错误消息 - 仔细阅读它们——它们通常能指出问题。
• 2.迭代开发 - 测试小块代码以隔离和解决问题。
• 3. Playwright Inspector - 它可以帮助记录动作并自动生成测试脚本，因此只需编写一段代码。您可以按如下方式启动剧作家检查器

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"

• 4.记录控制台消息 - 在无头模式下打印浏览器控制台消息，如下所示

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});

• 5.处理延迟加载 - 对于延迟加载元素，请使用以下函数
  • a. waitForSelector 或 waitFor
  • b.等待超时
  • c.如果需要则滚动到视图中
• 6.调试 DOM - 在浏览器控制台中使用 document.querySelector 或其他查询选择器来定位元素
• 7.捕获失败的屏幕截图

如果您已经到达这里，那么我已尽了令人满意的努力让您继续阅读。请留下任何评论或分享更正。

我的其他博客：

• 将 Web Component/MFE 与纯静态 HTML 集成
• 破解软件工程面试
• 我对 Web 组件的第一手经验 - 学习和限制
• 微前端决策框架
• 使用 Postman 工具测试 SOAP Web 服务

以上是通过 Playwright 和 Cucumber 集成增强您的 ETests的详细内容。更多信息请关注PHP中文网其他相关文章！