CodeCeptJS的实用介绍：结帐表的端到端测试写作
#javascript #测试 #playwright #codeceptjs

每个电子商务网站的核心是其“结帐”过程。商店发生的任何事情都应该有效，以确保现金流。这就是为什么应定期测试结帐的原因。为了减少人为因素并确定过程的稳定性，我们建议使用测试自动化框架。最简单的开始是codeceptjs

什么什么？你说codeceptjs吗？

是！ CodeceptJS是JavaScript的流行开源测试框架。它旨在使使用可读和直观的语法易于编写和维护Web应用程序的端到端测试。要在浏览器中运行测试，它使用Microsoft的 Playwright 库。

codeceptjs于2015年首次发布，此后已成为JavaScript开发人员的流行测试框架。从初创企业到大型企业，各种规模的组织都广泛使用它。

让我们安装codeceptjs！

要安装CodeCeptJS，您需要在系统上安装Node.js和NPM（NODE.JS软件包管理器）。您可以通过在终端中运行以下命令来检查是否已经安装了这些工具：

node --version
npm --version

如果这些命令中的任何一个都返回错误，则需要安装node.js和npm，然后才能安装codeceptjs。您可以从官方网站下载并安装最新版本的node.js，其中包括NPM。

安装CodeCeptjs创建一个新文件夹并运行命令表格终端：

npx create-codeceptjs .

如果运行NPX CREATE-CODECEPTJS。命令，它将在当前目录中使用playwright安装codeceptjs。

npx命令是NPM（node.js package manager）随附的工具，它允许您运行NPM软件包，而无需在系统上全球安装它们。

下载浏览器时可能需要一些时间：Chrome，Firefox和Safari并创建一个演示项目。

，但我们在这里编写结帐测试，对

让我们初始化一个新项目！

运行

npx codeceptjs init

同意默认值（按每个问的问题按Enter）。当询问基本网站URL时，请提供您正在测试的电子商务网站的URL。例如，如果您在本地运行该网站，则可能是：https://myshop.com如果您测试已经发布的网站或http://localhost。

当询问测试名称和套件名称时，请写“结帐”。它将创建以下杂性结构：

.
├── codecept.conf.js
├── package.json
└── Checkout_test.js

项目目录根部的codecept.conf.js文件包含codeceptjs的全局配置设置。

现在打开测试：

Feature('Checkout');

Scenario('test something', ({ I }) => {
});

在方案块中您编写测试。

将I.amOnPage('/')添加到其中。它将打开您指定为基础的URL上的浏览器。

Feature('Checkout');

Scenario('test something', ({ I }) => {
  I.amOnPage('/')
});

但是您可能想问...

我是什么？

很高兴您问！

在codeceptjs中，I对象用于表示用户在测试方案中执行操作。它提供了许多方法（也称为操作），可用于模拟用户与正在测试的应用程序的交互。

i对象中一些最受欢迎的动作是：

  • I.amOnPage(url)：此操作将用户导航到指定的URL。
  • I.click(locator)：此操作模拟给定定位器确定的元素单击。
  • I.fillField(field, value)：此操作填充了指定的字段。
  • I.see(text, context)：此操作检查给定文本是否在页面上可见（或指定上下文中）。
  • I.selectOption(select, option)：此操作从给定的选择下拉列表中选择指定的选项。
  • I.waitForElement(locator, timeout)：此操作等待指定的元素出现在页面上，直到给定超时。
  • I.waitForText(text, timeout, context)：此操作等待给定文本出现在页面上（或指定上下文中），直到给定超时。

我们将需要使用它们来导航到结帐过程。我们如何导航网络？确保单击链接！

让我们使用I.click()。

但是我们如何访问网页上的元素？

codeceptjs足够聪明，可以通过其可见文本找到可单击的元素。例如，如果在您的电子商务网站上，您可以使用该名称的“咖啡杯”，您可以使用

I.click('Coffee Cup');

，但有时元素不太容易找到，因此您可以使用CSS或XPATH定位器来定位它们。

例如，通过CSS找到咖啡杯可以进入页面和元素属性的Accont HTML结构。例如，可以这样：

I.click('div.products a.product-name[title="Coffee Cup"]');

在此示例中，选择器的div.products部分指定了带有products类的DIV元素，而a.product-name[title="Coffee Cup"]零件则指定了一个a元素，其中the product-name class和title属性设置为咖啡杯。

您可以阅读有关HTML和CSS定位器的更多信息，基本上，这就是您开始编写结帐测试所需的一切！

回到结帐

让我们看看常规结帐脚本在codeceptjs中的外观：

Scenario('test the checkout form', async ({ I }) => {
  // we select one product and switched to checkout project
  I.amOnPage('/');
  I.click('Coffee Cup');
  I.click('Purchase');
  I.click('Checkout');

  // fill in the shipping address
  I.fillField('First Name', 'John');
  I.fillField('Last Name', 'Doe');
  I.fillField('Address', '123 Main St.');
  I.fillField('City', 'New York');
  I.selectOption('State', 'New York');
  I.fillField('Zip Code', '10001');

  // select a payment method
  I.click('#credit-card-option');
  I.fillField('Card Number', '1234-5678-9012-3456');
  I.fillField('Expiration Date', '12/22');
  I.fillField('Security Code', '123');

  // click the checkout button
  I.click('Checkout');

  // verify that the checkout was successful
  I.see('Your order has been placed successfully!');
});

肯定的是，您的脚本可能更复杂。如您所知，我们使用CSS定位器'#credit-card-option'获取选择付款选项。但是，该测试很简单，您可以按照用户步骤进行操作。

请注意，您不应该在此处使用真实的信用卡号码。好消息，您不需要。付款提供商（例如Strip）提供虚拟卡号，用于测试目的。

使用下一个命令进行测试：

npx codeceptjs run --debug -p pauseOnFail

这里有什么特殊选择？

  • --debug标志用于将其他信息输出到控制台，例如测试中每个步骤的详细信息，变量值以及测试断言的结果。这可以帮助您识别和解决测试中的任何问题。
  • -p pauseOnFail选项也用于保持浏览器打开，即使测试失败也是如此。它将帮助我们确定执行哪个点测试以及可以改进的要点。

如果需要，请添加更多测试步骤，更新定位器，并通知企业主，所有购买都是您进行的，这样您的大学就不会在晚上打电话给您，询问您何时想获得咖啡杯好主意是在登台网站上运行测试，不干扰业务流程。

什么测试完成了，您可以使用：
运行它 

npx codeceptjs run

如果您很生气看到浏览器窗口，则可以使用HEADLESS环境变量：

HEADLESS=true codeceptjs run

对于Windows用户，应以不同的方式设置无头：

set HEADLESS=true&& codeceptjs run

测试将通过，但没有显示浏览器，因此您可以在进行时观看YouTube视频！

重构

如果您需要检查更多购买怎么办？您应该为此复制粘贴代码吗？

不！您可以使用页面对象模式将重复交互放入可重复使用的功能中。

您可以通过Next命令创建页面对象：

npx codeceptjs gpo

当然，我们将其称为Checkout。它将在./pages/Checkout.js文件中创建。您应该在include中的codecept.conf.js中启用它：

    include: {
    ...
      checkoutPage: './pages/Checkout.js',
    },

现在打开此文件：

const { I } = inject();

module.exports = {

  // insert your locators and methods here
}

感觉真的很空。我们应该怎么做？我们应该编写更多代码吗？不，我们已经有了它。让我们从测试中复制代码块，并将它们放在corledponnding函数名称下：

connst { I } = inject();

module.exports = {

  fillShippingAddress(name, address, city, state, zip) {
    I.fillField('Name', name);
    I.fillField('Address', address);
    I.fillField('City', city);
    I.fillField('State', state);
    I.fillField('Zip', zip);
  },

  fillValidCreditCard() {
    I.click('#credit-card-option');
    I.fillField('Card Number', '1234-5678-9012-3456');
    I.fillField('Expiration Date', '12/22');
    I.fillField('Security Code', '123');
  },

  checkout() {
    I.click('Checkout');
  },
}

之后，我们可以更新测试以使用创建的页面对象。请注意，我们通过其名称checkoutPage导入Checkout PageObject，我们以前在配置中定义了。

Scenario('test the checkout form', async ({I, checkoutPage}) => {
  I.amOnPage('/');
  I.click('Coffee Cup');
  I.click('Purchase');
  I.click('Checkout');

  // fill in the shipping address using the page object
  checkoutPage.fillShippingAddress('John', 'Doe', '123 Main St.', 'New York', 'New York', '10001');
  checkoutPage.fillValidCreditCard();
  checkoutPage.checkout();

  // verify that the checkout was successful
  I.see('Your order has been placed successfully!');
});

您看到测试的代码减少了。我们可以以相同的方式编写类似的测试。

通过申请越来越多的案例，您可以对所有行为进行测试。

概括

这是一个深入的潜水！如果您考虑仅启动测试自动化，则CodeCeptJS是您的最佳选择，因为它使用本地语言将命令传递给浏览器。

如果您已经熟练使用JavaScript，则可以使用CodeCeptJS，可以专注于测试的业务级别，而不是为浏览器编写代码。这样，您可以保持测试稳定且可维护。

提供测试网站的日常状态，请使用Testomat.io进行测试报告。因此，您始终知道最后一次检查何时执行以及通过了哪些测试和失败。

享受测试！