如何使用JavaScript和Selenium在TestCafe进行现代网络测试无论是应用程序还是网络应用程序，每个软件

无论是应用程序还是网络应用程序，每个软件在开发后都需要进行测试，以确保它能完成我们所期望的工作。软件测试包括使用手动或自动工具。测试自动化工具比手动工具更适合使用，因为它们可以提高软件测试的有效性、效率和覆盖率。

端到端测试（或E2E测试）用于测试一个应用程序从开始到结束的流程是否符合预期。端到端测试模拟真实的用户场景，自动化工具测试真实用户如何使用该应用程序。

这篇关于TestCafe的现代网络测试的博客将帮助你学习如何使用TestCafe和云Selenium Grid进行JavaScript端到端自动化网络测试。

让我们开始吧!

什么是TestCafe？

根据StackOverflow 2021年的开发者调查，JavaScript作为最常用的编程语言已经完成了第九个年头。

TestCafe是一个Node.js端到端的免费开源自动化框架，用于测试网络应用。TestCafe同时支持JavaScript和TypeScript。因此，你可以用这两种语言中的任何一种编写TestCafe测试。有了TestCafe，你不需要依赖WebDriver，也不需要担心手动超时的问题。通过这个TestCafe教程，你可以充分利用跨浏览器测试，用TestCafe进行现代网络测试。

什么是Selenium？

Selenium是一个开源的自动化框架，广泛用于Web应用程序的自动化测试。新版本的Selenium已经在市场上推出。最新版本是Selenium 4，是Selenium 3的升级版。你可以通过这个Selenium 4教程来了解Selenium 4的功能和改进。

Selenium 4中最明显的改进是符合万维网联盟（W3C）的WebDriver APIs。这意味着Selenium 4提供了更稳定的跨浏览器测试，因为不需要对API请求进行额外的编码-解码。

GitHub上的TestCafe趋势

TestCafe是一个盛行的测试自动化框架；从TestCafe官方GitHub仓库获得的数据说明了一切。

星级：93K
贡献者。107
叉子。650
释放。338
被10K用户使用

在写这篇博客的时候，TestCafe在NPM上有254,003次周下载。

TestCafe自动化的优势

现在我已经介绍了TestCafe的基本原理，让我们看看TestCafe的一些显著优势。JavaScript支持其他几个网络自动化框架，如WebDriverIO、Mocha、Jasmine、Protractor等。关键问题是，TestCafe的核心特长是什么？

下面是TestCafe自动化框架的一些主要优点。

TestCafe很容易设置，因为它不需要安装第三方插件、网络驱动或额外的库来运行测试。
TestCafe支持所有主要的浏览器，如
- 谷歌浏览器
- IE 11
- 微软Edge
- Mozilla
- Safari浏览器
- Chrome手机版
- Safari手机版
TestCafe是开源的，可以免费使用，因为它是由MIT授权的。

开始使用TestCafe自动化

在这篇关于TestCafe的现代网络测试的文章中，你将学习如何安装TestCafe并在TestCafe中运行你的第一个测试。要在你的系统中安装和使用TestCafe，你需要安装一个文本编辑器、NodeJS和Node Package Manager（NPM）。

为了演示，我将使用Visual Studio Code作为文本编辑器。不过，你也可以使用你选择的IDE。

以下是使用TestCafe进行现代网络测试所需的VS Code扩展列表：

TestCafe Snippets:为TestCafe提供代码片断
TestCafe Test Runner：你直接从VS Code运行测试。
TestLatte:让你在VS Code上调试或运行你的TestCafe测试。

如何安装TestCafe扩展

要安装TestCafe扩展，请遵循下面提到的步骤：

在你的电脑上，创建一个名为 "TestCafeDemo "的文件夹。
右键单击该文件夹，用VS Code打开它。
一旦VS Code启动，通过点击屏幕左侧的扩展按钮导航到扩展。

在扩展的搜索栏中，输入 "testcafe"，所有三个扩展都会出现。点击每个扩展并安装它。

在VS代码中安装TestCafe

要在VS Code中安装TestCafe，请按照下面提到的步骤进行。

点击VS Code窗口顶部的终端选项，打开终端，然后选择新终端，如下图所示。

在你的终端上运行下面的命令来安装TestCafe。

npm install testcafe.

安装完成后，运行下面的命令，查看所安装的TestCafe的版本

testcafe -v

如下图所示，我使用的是TestCafe 1.18.4版本。

运行下面的命令，创建一个Package.json文件。

npm init

package.json文件表示与我们项目有关的各种元数据。该文件也有助于NPM识别项目的信息和依赖性。

运行下面的命令，将TestCafe作为我们项目的一个依赖项。

npm install testcafe

现在，如果你导航到package.json文件，你会发现TestCafe已经被添加为依赖关系之一。

如何使用TestCafe运行Selenium测试？

为了演示如何使用Selenium进行TestCafe测试，我将使用LambdaTest的一个假的电子商务游乐场进行自动化测试场景。在这里，客户需要创建一个账户，以便能够从网站上购买东西。

为了确保注册表单按预期工作，你可以使用TestCafe来运行自动化测试，TestCafe模拟终端用户与DOM中的元素的交互。该自动化测试将在Chrome、Firefox和Safari浏览器上进行。

为了运行该测试，我们将创建一个名为 "TestCafeTests "的文件夹。在该文件夹内，我们将创建两个文件夹，分别称为 "PageModel "和 "Tests"。我们将在 "TestCafeTests "文件夹内创建两个文件夹，因为我们将在Selenium中使用页面对象模型。

页面对象模型，也被称为POM，是一种设计模式，其中创建了一个对象库来存储WebElements。POM帮助我们减少代码的重复，并最大限度地减少测试案例维护的工作量。

在运行测试之前，让我们看看测试用例如何在电子商务注册页面上运行测试。

测试场景（Chrome浏览器）

导航到电子商务操场。
在名字输入栏中添加 "John"。
在姓氏输入字段中添加 "Doe"。
在电子邮件输入字段中添加 "johndoe@example.com"。
在电话输入栏中添加 "0712345678"。
在密码输入栏中加入 "Qwerty123!"。
将 "Qwerty123!"添加到密码确认输入字段。
选择 "同意隐私政策 "复选框。
点击 "继续 "提交按钮。

要运行TestCafe测试，请按照下面提到的步骤进行：

在你的项目中创建一个新的文件夹，并在这个路径中称为 "TestCafeTests"，"TestCafeDemo/TestCafeTests"。

在 "TestCafeTests "文件夹中，创建另外两个文件夹，称为 "PageModel "和 "Tests"。

在 "PageModel "文件夹中，让我们创建一个名为 "SignUp.js "的文件，如下所示。

设置POM

你可以按照下面提到的步骤来设置POM。

在这一步，我们将在 "SignupPage.js "文件中声明 "SignupPage "类，并导出其实例，如下所示。

class SignupPage {

   constructor(){
   }
}

export default new SignupPage();

我们将需要在 "SignupPage "类中添加WebElements。这些WebElements将是我前面提到的电子商务网站注册页面上的输入字段和按钮。
导航到注册页面，检查网页并获得输入字段的ID定位器，以及用户在创建账户时要填写和点击的按钮，如下图所示。

然后将 "名、姓、电子邮件、电话、密码、确认密码、点击同意并继续 "的ID和Class定位器添加到模型中。为此，我们将引入 "firstnameInput, lastnameInput, emailInput, telephoneInput, passwordInput, confirmInput, agreeBtn, and continueBtn " 属性并为其分配一个选择器。如果你想了解更多关于Selenium定位器的信息，请浏览这篇关于Selenium WebDriver中定位器的文章。
当检查网页以获得ID定位器时，你会发现 "继续 "提交按钮没有分配ID。为了使TestCafe能够定位它，我们将获得提交按钮的类名，并在类前添加 "input."，而不是代表ID定位器的 "#"。
为了给它们分配一个选择器，我们将不得不在TestCafe的 "SignupPage.js "文件的顶部导入它。现在 "SignupPage.js "文件应该如下所示。

文件名 - SignupPage.js

import {Selector, t} from 'testcafe';

class SignupPage {

   constructor(){
       this.firstnameInput = Selector('#input-firstname');
       this.lastnameInput = Selector('#input-lastname');
       this.emailInput = Selector('#input-email');
       this.telephoneInput = Selector('#input-telephone');
       this.passwordInput = Selector('#input-password');
       this.confirmInput = Selector('#input-confirm');
       this.agreeBtn = Selector('#input-agree');
       this.continueBtn = Selector('input.btn-primary');
   }
}

export default new SignupPage();

现在让我们创建一个测试，使用我们先前创建的POM设计模式Page。在 "测试 "文件夹中，创建一个名为 "SignupTest.js "的文件，如下所示。

在 "SignupTets.js "文件中，我们将从 "SignupPage.js "文件中导入页面模型实例，如下图所示。

import SignupPage from "../PageModel/SignupPage";

现在让我们创建一个名为 "url "的变量，它将保存自动化测试所针对的测试URL。

import SignupPage from "../PageModel/SignupPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

接下来我们将声明一个夹具。固定装置用于将测试用例的列表分为不同的类别。在Selenium中，夹具代表一组针对一个URL的测试。固定装置有助于管理不同测试页面的测试用例。每个固定装置可以代表登录页、注册页或主页的测试。

import SignupPage from "../PageModel/SignupPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

fixture('SignUp Page')
   .page(url)

现在声明一个名为 "Registration "的测试用例，它是一个异步函数，包含测试控制器对象（t）的测试代码。所有的测试动作都作为测试控制器对象t的异步函数来实现，这个对象被用来访问测试运行API。

import SignupPage from "../PageModel/SignupPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

fixture('SignUp Page')
   .page(url)

test("Registration", async t => {
   
});

接下来我们将使用 "t.wait "函数来等待动作的完成。当TestCafe执行一个Selector查询时，它等待目标元素出现在DOM中。

import SignupPage from "../PageModel/SignupPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

fixture('SignUp Page')
   .page(url)

test("Registration", async t => {
   await t
       
});

之后，我们将使用一个名为".typeText "的TestCotroller方法，它需要两个参数。第一个参数是一个选择器，它确定了DOM中要接受输入焦点的WebElement。第二个参数是我们打算在最近定位的WebElement中输入的文本。
为了测试单选按钮和提交按钮，我们将使用一个名为".click "的TestController方法。TestController的".click "方法执行对WebElement的点击，它需要一个参数--用于识别页面上的WebElement的选择器。
由于我们已经在页面模型中声明了选择器，并将页面模型导入到我们的测试文件中，我们只需在".typeText "和".click "TestController方法中添加选择器的名字作为第一个参数，如下所示。

文件路径 "TestCafeDemo/TestCafeTests/Tests/SignupTest.js"

import SignupPage from "../PageModel/SignupPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

fixture('SignUp Page')
   .page(url)

test("Registration", async t => {
   await t
       .typeText(SignupPage.firstnameInput, 'John')
       .typeText(SignupPage.lastnameInput, 'Doe')
       .typeText(SignupPage.emailInput, 'johndoe@example.com')
       .typeText(SignupPage.telephoneInput, '0712345678')
       .typeText(SignupPage.passwordInput, 'Qwerty123!')
       .typeText(SignupPage.confirmInput, 'Qwerty123!')
       .click(SignupPage.agreeBtn)
       .click(SignupPage.continueBtn);
});

要运行测试，在你的命令行上运行下面的命令。该命令指定了要使用的浏览器和有我们想在测试页上进行的测试的文件。

testcafe chrome TestCafeTests/Tests/SignupTest.js

TestCafe将启动Chrome浏览器，导航到我们在夹具中指定的URL，并运行作为测试功能一部分的所有测试。如果一切正常，你应该在终端上得到通知，测试运行成功。

如何在TestCafe中运行并行测试？

Selenium中并行测试的主要目的是加快测试执行时间。并行测试的主要好处是。

加速测试执行
增加测试和浏览器覆盖率

我们可以通过启用并发模式，使用TestCafe并行地执行测试，同时运行多个浏览器实例。

要在用TestCafe进行现代网络测试时启用并发模式，在运行测试时使用-c命令行选项。要发现其他TestCafe命令行选项，你可以在终端运行以下命令。

testcafe --help

下面的命令调用了两个Chrome实例，并并行运行测试。

testcafe -c 2 chrome tests/firstTest.js

在对多个浏览器进行测试时，你也可以使用并发性。在设置浏览器实例的数量时，确保它们不超过你所运行的测试。额外的浏览器会打开，但最终会出现空页面，因为没有给这些浏览器留下测试。额外的浏览器和空页面只会导致系统资源的消耗。

testcafe -c 2 chrome, safari, firefox tests/firstTest.js

如前所述，并行测试的主要好处是减少测试时间；如果大量的测试场景必须在云Selenium网格上执行。为了证明这一点，我们将创建另一个测试，检查客户是否能够登录到他们的账户。然后我们将运行一个正常的测试，然后再运行一个平行测试来进行比较。

在PageModel文件夹中创建一个名为 "LoginPage.js "的新文件，在Tests文件夹中创建一个名为 "LoginTest.js "的文件，如下所示。

在 "LoginPage.js "文件中设置页面对象模型，如下图所示。

import { Selector, t } from 'testcafe';

class LoginPage {

   constructor() {
       this.emailInput = Selector('#input-email');
       this.passwordInput = Selector('#input-password');
       this.loginBtn = Selector('input.btn-primary');
   }
}

export default new LoginPage();

在 "LoginTest.js "文件中创建一个登录测试，如下图所示。

import LoginPage from "../PageModel/LoginPage";

const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/login'

fixture('Login Page')
   .page(url)

test("Login", async t => {
   await t
       .typeText(LoginPage.emailInput, 'johndoe@example.com')
       .typeText(LoginPage.passwordInput, 'Qwerty123!')
       .click(LoginPage.loginBtn);
});

现在让我们使用下面的命令运行一个测试，看看测试需要多长时间。

testcafe chrome TestCafeTests/Tests

正如你从截图中看到的，执行两个测试需要50秒。

现在让我们通过使用下面的命令看看并行测试是否会花费少于50秒的时间。

testcafe -c 2 chrome TestCafeTests/Tests

从下面的截图可以看出，并行测试花了37秒来执行测试。这意味着并行测试为我们节省了13秒。这可能不是很多，但想象一下，如果你正在运行100个或更多的测试，它会为你节省多少时间。

测试自动化是非常有益的，但有时它可能是相当昂贵的，特别是在大规模测试的时候。为了确定测试自动化是否值得花费，你将需要计算投资回报率（ROI）。评估测试自动化的投资回报率的指标之一是计算出运行自动测试可以节省多少时间。

如何在TestCafe中以无头模式运行测试？

简单地说，无头模式是在浏览器上运行测试，而不启动或显示浏览器的用户界面，也就是说，测试在后台运行。无头模式测试提高了测试的速度和性能，因为系统节省了处理能力，否则会用于运行浏览器实例。

TestCafe允许你在Google Chrome和Mozilla Firefox中运行测试。要用TestCafe在无头模式下使用Chrome浏览器进行现代网络测试，可以使用以下命令。

testcafe chrome:headless tests/firstTest.js

要使用Firefox在无头模式下运行测试，可以使用下面的命令。

testcafe firefox:headless tests/firstTest.js

如何使用TestCafe和Cloud Selenium Grid运行测试？

在这篇关于用TestCafe进行现代Web测试的文章中，你可能已经意识到，在不同的浏览器和平台版本上运行测试，用本地Selenium网格是非常麻烦的。

让我们考虑一个假设的情况，你有一台Windows机器，你想在（Safari + macOS）或（Firefox + Linux）组合上运行跨浏览器测试。这就是云Selenium测试可以带来巨大好处的地方，因为它消除了对内部测试基础设施的持续投资维护。

云Selenium网格为我们提供了一种选择，可以在一系列的虚拟浏览器、浏览器版本和操作系统上安全地通过云来运行测试。LambdaTest就是这样一个平台，它提供了一个安全、可扩展和超级可靠的基于云的Selenium Grid基础设施，让你可以大规模地运行测试。

LambdaTest是一个基于云的跨浏览器测试平台，允许你在一个由3000多个真实浏览器和操作系统组成的在线浏览器场上运行测试，适用于移动、桌面和平板电脑。LambdaTest Selenium Grid还允许你进行并行测试。

要将LambdaTest Selenium Grid与TestCafe一起使用来运行你的测试，你将需要一个LambdaTest账户。

导航到LambdaTest网站，如果你已经有一个账户，请登录；如果你还没有账户，请创建一个。

登录后，通过点击屏幕左侧侧边栏的自动化，导航到自动化页面。

要在LambdaTest Grid中使用TestCafe，你需要LambdaTest凭证（即用户名和访问密钥）。要获得凭证，请点击屏幕右侧的 "访问密钥 "按钮。

现在让我们把凭证（用户名和访问密钥）保存到我们项目的环境变量LT_USERNAME和LT_ACCESS_KEY中。
在Linux/Mac上，要把用户名保存到环境变量LT_USERNAME，把访问密钥保存到LT_ACCESS_KEY，请运行以下命令。

$ export LT_USERNAME= insert your username
$ export LT_ACCESS_KEY= insert your access_key

对于Windows，运行以下命令

$ set LT_USERNAME= insert your username
$ set LT_ACCESS_KEY= insert your access_key

要把这些凭证添加到你的项目中的环境变量中，在Visual Studio命令行上运行以下命令。

nano .bashrc

然后添加你的凭证，如下图所示。

$ export LT_USERNAME= insert your username
$ export LT_ACCESS_KEY= insert your access_key

确保你按CTRL + X保存该文件，然后按回车键。
LambdaTest有一个npm插件，允许你将TestCafe与LambdaTest整合在一起，实现无缝的跨浏览器兼容性和真正的测试覆盖。你可以通过运行以下命令来安装该插件。

	
npm install testcafe-browser-provider-lambdatest

运行下面提到的命令，看看LambdaTest Selenium Grid支持的浏览器。

	
testcafe -b lambdatest

让我们在项目中保存我们的TestCafe凭证，这样我们在LambdaTest Selenium Grid上的认证就会通过。你可以通过运行下面的命令来保存凭证。

	
$ set LT_USERNAME=*insert your username*
$ set LT_ACCESS_KEY=*insert your accesskey*

现在我们已经准备好使用TestCafe和LambdaTest Selenium Grid运行我们的测试。

测试案例场景

如前所述，使用Cloud Selenium Grid的好处是可以选择在多个浏览器版本和操作系统上测试。在我们的案例中，我们将使用三种测试组合来测试我们的电子商务网站注册和登录表单是否按预期工作。这些组合是：

Chrome 85.0 + macOS Catalina
火狐78.0 + Windows 10
Chrome 86.0 + Windows 11

实施

为了定义你想要的浏览器和操作系统组合，你可以使用LambdaTest能力生成器，如下所示。

在设置好你所需要的组合后，创建一个名为config.json的文件，并添加你的组合，如下图所示，无需改变代码。

文件名 - config.json

{
   "Chrome@85.0:MacOS Catalina": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   },


   "Firefox@78.0:Windows 10": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   },


   "Chrome@86.0:Windows 11": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   }
}

要在（Chrome 85.0 + MacOS Catalina）组合上运行测试，请运行以下命令。

testcafe "lambdatest:Chrome@85.0:MacOS Catalina" TestCafeTests/Tests

要在（Firefox 78.0 + Windows 10）组合上运行测试，请运行下面的命令。

testcafe "lambdatest:Firefox@78.0:Windows 10" TestCafeTests/Tests

要在（Chrome 85.0 + Windows 11）组合上进行测试，请运行下面的命令。

testcafe "lambdatest:Chrome@85.0:Windows 11" TestCafeTests/Tests

在测试代码没有问题的情况下，你应该在Visual Studio代码终端上看到每个组合的测试都是成功的消息。

如果你访问屏幕右侧的LambdaTest仪表板，你应该能够看到你最近的测试，如下图所示。

如果你点击其中一个测试，你将被重定向到自动化仪表板，那里有关于该测试的所有信息。这些信息包括一个视频和一个截图，向你展示测试的过程。

这个认证将承认你在使用JavaScript创建自动化浏览器测试方面的专业知识。下面是LambdaTest公司对Selenium JavaScript 101认证的一个简短介绍。

如何在TestCafe和Cloud Selenium Grid上运行并行测试？

在Selenium中，并行测试可以被描述为一种测试方法，你可以用来在不同的环境中同时运行测试，如浏览器版本和操作系统。

在TestCafe和Cloud Selenium Grid上进行并行测试的主要好处之一是，它可以加速测试的执行，同时节省时间，特别是在大规模测试时。另外，与顺序测试相比，Selenium的并行测试具有成本效益，投资回报率（ROI）更高。

顺序测试是一个繁琐的过程，需要开发、维护，并保持测试环境一直在更新。与Selenium的平行测试相比，管理所有这些因素的成本会很高，因为Selenium是自动化的，而且是基于云的。

要在LambdaTest Cloud Selenium Grid上运行我们之前使用的浏览器和操作系统组合的并行测试，你可以在你的Visual Studio Code编辑器终端运行下面的命令。

testcafe "lambdatest:Chrome@85.0:MacOS Catalina","lambdatest:Firefox@78.0:Windows 10","lambdatest:Chrome@85.0:Windows 11" TestCafeTests/Tests

从下面的截图可以看出，测试在所有组合上都成功运行。

一旦测试运行成功，请登录LambdaTest自动化仪表板，检查测试执行的状态。你还可以访问分析仪表板上的报告，它显示了与你的测试有关的所有细节和指标。

测试摘要通过显示有多少测试通过和失败，让你对测试性能有一个高层次的概述。下面是一个截图，显示了与我在Cloud Selenium Grid和TestCafe JavaScript端到端网络测试中运行的测试相关的所有细节和指标。

总结

TestCafe的理念是解决开发人员和测试人员在使用Selenium等测试工具时面临的共同挑战。然而，云Selenium网格和TestCafe JavaScript的整合可以帮助你扩大测试环境，而无需花费大量资金建立内部网格基础设施。我希望你喜欢这篇关于用TestCafe进行现代网络测试的文章!