使用 JavaScript 大规模运行自动化测试

Suhagkumar Vamja

4.80/5 (3投票s)

2023年11月9日

CPOL

10分钟阅读

5906

本教程将讨论如何使用 Selenium 和 JavaScript 对网站和 Web 应用程序进行自动化测试。

数字化格局彻底改变了 Web 和移动平台的使用方式，极大地影响了用户如何利用这些平台在多个方面做出更好的决策。因此，许多软件产品正在努力为用户提供顶级的数字体验。

在交付高质量应用程序方面，测试在确保应用程序满足开发要求方面起着至关重要的作用。这意味着要建立高内部质量保证标准，并投资于自动化测试，以实现更快的发布周期和快速的开发人员反馈。

在对 Web 应用程序执行自动化测试时，有许多框架可供选择。然而，Selenium 是一个流行的测试自动化框架，它可以自动化 Web 浏览器，并支持包括 JavaScript 在内的各种编程语言。

根据 Stack Overflow 开发者调查，JavaScript 是一种广泛使用的编程语言。由于 JavaScript 广泛用于 Web 开发，开发人员也可以利用它在执行 Selenium 自动化测试时编写测试脚本。此外，JavaScript 拥有丰富的库和框架生态系统，如 TestCafe、Mocha 和 Chai，这些都非常适合自动化测试。

来源

本教程将讨论如何使用 Selenium 和 JavaScript 对网站和 Web 应用程序进行自动化测试。接下来，我们将使用 TestCafe 等基于 JavaScript 的测试框架与 Selenium 结合使用，并在云端大规模执行并行测试。

什么是 Selenium？
如何使用 JavaScript 设置 Selenium？
使用 Selenium 编写第一个自动化测试脚本
如何使用 JavaScript 测试框架设置 Selenium？
使用 TestCafe 框架进行并行测试执行
本地 Grid 测试的挑战
在 LambdaTest 上运行测试用例
在 LambdaTest 上并行运行测试用例
结论

什么是 Selenium？

Selenium 是一个流行的 Web 应用程序浏览器自动化测试框架。在最近的一项测试自动化调查中，64.2% 的参与者表示他们使用 Selenium 进行自动化测试。

来源

它允许在众多操作系统和浏览器上测试网站或 Web 应用程序。它还支持多种编程语言，如 JavaScript (Node.js)、C#、Java、Python、Ruby 等，允许测试人员以最熟悉的语言自动化他们的网站测试。

Selenium 框架包含三个组件，如下图所示。

Selenium IDE

Selenium IDE（集成开发环境）提供了一个录制和回放工具，可以根据在浏览器上执行的操作生成脚本。它提供了一个用户友好的界面，允许测试人员和开发人员轻松地将自动化测试脚本导出为 Python、Java、JavaScript、Ruby、C# 等编程语言。它是初学者的理想工具，几乎不需要任何编程知识。但是，它无法创建更复杂的测试用例。为此，可以使用 Selenium WebDriver 和 Selenium Grid。

Selenium WebDriver

Selenium WebDriver 提供了一种可靠的面向对象的方法来自动化浏览器。使用 Selenium WebDriver 可以用 Java、C#、Python、Ruby 和 JavaScript 等编程语言编写自动化脚本。WebDriver 支持多种浏览器，包括 Chrome、Firefox、Safari、Microsoft Edge 等。

Selenium Grid

Selenium Grid 也被归类为本地网格，它允许您通过将测试执行分配到多个物理或虚拟机上来实现并行测试执行。借助其与 Selenium WebDriver 的集成，您可以同时在多个浏览器、操作系统和设备上运行测试。Selenium Grid 由多个节点和一个中心组成。测试被分发到可用的节点，在中心执行，中心作为测试注册的中央位置。

如何使用 JavaScript 设置 Selenium？

使用 JavaScript 设置 Selenium 相对容易。您可以按照本节提供的步骤轻松完成设置。

必备组件

最新版本的 Node.js。
您希望运行测试的 Web 浏览器。

使用 JavaScript 包管理器 npm，您可以通过在命令行或终端中输入以下命令来安装 Selenium

npm install selenium-webdriver

控制台输出

要验证 Selenium 的安装，请查看 package.json 文件

{
  "dependencies": {
    "selenium-webdriver": "^4.12.0"
  }
}

使用 Selenium 编写第一个自动化测试脚本

我们大多数人都使用过网站的登录认证功能来访问其功能，那么为什么不测试登录功能呢？

在本节中，我们将创建两个简单而实用的测试场景，其中一个是获取网站标题，另一个是向字段添加数据并单击按钮。为了运行这些测试，我们将使用简单表单演示，这是一个由 LambdaTest 维护和管理的演示网页。

获取网站标题

在此测试中，我们将打印从网站检索到的标题。我们将使用 Firefox 浏览器执行测试。

const { Builder, Browser } = require("selenium-webdriver");

async function example() {
  // To wait for the browser to build and launch properly
  let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

  // To fetch http://google.com from the browser with our code.
  await driver.get("https://www.lambdatest.com/selenium-playground/simple-form-demo");

  // Verify the page title and print it
  var title = await driver.getTitle();
  console.log("\nTitle is:", title);

  // It is always a safe practice to quit the browser after execution
  await driver.quit();
}

example();

控制台输出

代码演练

const 语句在我们的代码中充当导入语句。导入语句帮助您加载所有属于 Selenium 包的库。在下面的代码中，我们从 Selenium 包中加载 WebDriver。

在这行代码中，我们将 WebDriver 的新实例分配给 Firefox 作为浏览器。

get()：这是 WebDriver 对象提供的方法，用于导航到特定的 URL。它指示 Web 浏览器打开指定的 URL。

title：title 方法用于检索用户当前正在处理的网页的标题。

quit()：此方法退出整个浏览器会话及其所有选项卡和窗口。

在自动化中，与输入字段和按钮交互是常规任务。右键单击网页上的任意位置并选择“检查元素”以查看元素的详细信息。将鼠标悬停在您要访问的元素上。

使用 find_element() 方法，我们可以处理您在检查元素期间找到的输入元素，并使用 send_keys()，您可以将值发送到浏览器输入字段。

您可以通过将选定的文本或值作为参数来用所需数据填充输入字段来模拟用户输入。要使用按钮，您需要使用 find_element() 方法找到按钮，并使用 click() 方法按下它。借助下面的测试，我们将了解如何使用这些方法。

向字段添加数据并单击按钮

在此测试中，我们将在输入字段中添加Hello，然后通过按下按钮提交它。我们将使用 Firefox 浏览器执行测试。

const { Builder, Browser, By } = require("selenium-webdriver");

async function example() {
  let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

  await driver.get(
    "https://www.lambdatest.com/selenium-playground/simple-form-demo"
  );

  // Find the element with the id "user-message" and send the text "HELLO" to it
  await driver.findElement(By.id("user-message")).sendKeys("HELLO");

  // Find the element with the id "showInput" and click on it
  await driver.findElement(By.id("showInput")).click();

  await driver.quit();
}

example();

输出

代码演练

要使用 By，需要导入以下导入语句

使用 findElement() 函数获取元素。

sendKeys()：它用于将文本发送到任何字段，例如表单的输入字段。

click()：此方法将单击按钮。

如何使用 JavaScript 测试框架设置 Selenium？

测试框架提供了一种有组织且有效的测试方法。它提供了一种系统的方法来安排、自动化和管理测试，从而更轻松地查找和解决编码错误。

JavaScript 提供了 TestCafe、Jest、Jasmine、Mocha、QUnit、Cypress、Playwright、Nightwatch.js 和 Puppeteer 等测试框架，它们都被广泛使用。首先，我们将在 TestCafe 中重写我们之前的测试。

首先，我们需要使用以下命令安装 TestCafe。

npm install -g testcafe

控制台输出

我们需要将测试转换为如下所示的函数。

import { Selector } from "testcafe";

fixture("Simple Form Demo Test").page(
  "https://www.lambdatest.com/selenium-playground/simple-form-demo"
);

// Test 1
test("Test 1 - Getting title of the website", async (t) => {
  const websiteTitle = Selector("title").textContent;

  // Assert that the website title is "Selenium Grid Online | Run Selenium Test On Cloud"
  await t
    .expect(websiteTitle)
    .eql("Selenium Grid Online | Run Selenium Test On Cloud");
});

// Test 2
test("Should display the entered text when the button is clicked", async (t) => {
  const userMessageInput = Selector("#user-message");
  const showInputButton = Selector("#showInput");

  // Type the text "HELLO" into the user message input field
  await t.typeText(userMessageInput, "HELLO");

  // Click the show input button
  await t.click(showInputButton);
});

输出

TestCafe 将查找并运行测试，为您提供包含通过/失败状态的详细输出。您可以在自动化 Selenium 的 Web 测试任务时结合使用 Selenium 和 TestCafe，从而利用 TestCafe 的测试功能。

使用 TestCafe 框架进行并行测试执行

当您拥有一个大型测试套件时，并行测试可以大大缩短运行每个测试所需的时间。您可以利用 TestCafe 的内置并行测试执行功能来并行运行指定的代码。

考虑一个我们需要执行 2 个测试用例的示例，这将需要 7-8 秒。相比之下，如果使用并行测试执行，时间将为 5-6 秒。

方法如下

现在，使用以下命令运行脚本。

testcafe chrome --parallel 2 test_example.js

它表明您希望使用两个并行进程来执行测试。这意味着 TestCafe 将划分测试并在两个 CPU 核心上并行运行它们，这可以加快您的测试套件的执行速度。

不带并行测试执行

带并行测试执行

如您所见，整个测试脚本在 6 秒内执行完毕，比上面执行的测试（耗时8 秒）少了 2 秒。

本地 Grid 测试的挑战

在本地网格上测试时可能会出现许多挑战。更易于获取的物理设备和浏览器是主要问题之一。本地网格使跨各种设备和浏览器配置的测试变得具有挑战性，这可能会对测试覆盖率产生负面影响。

它还需要大量资源，包括基础设施设置、软件和硬件，以维护和管理。扩展网格以处理不断增长的测试需求可能需要时间和金钱。

基于云的测试网格解决了本地网格的问题。它们提供各种设备和浏览器，实现可扩展和灵活的测试。测试人员可以使用不同的配置，并行运行测试以加快执行速度，并增加覆盖率。基于云的网格不需要管理本地基础设施。

像 LambdaTest 这样的人工智能驱动的测试编排和执行平台提供了一个云网格，您可以在其中使用 Selenium 和 JavaScript 等自动化测试框架运行测试。它们使得使用 TestCafe 和 Unittest 等知名测试框架轻松编写和执行自动化脚本，支持众多最新和旧版浏览器以及不同的操作系统。

在 LambdaTest 上运行测试用例

在本节中，我们将使用 TestCafe 作为框架，在 LambdaTest 上执行 Selenium 自动化测试。我们将在 Windows 10 操作系统上使用 Chrome 118.0 版本进行测试。

在 LambdaTest 上运行 JavaScript 测试之前，请按照以下简单步骤操作。

创建 LambdaTest 账户并完成所有必需的流程。
转到 LambdaTest 仪表板。要获取您的凭据，请导航到右上角的个人资料头像。
从右上角的个人资料图标获取您的凭据，然后选择帐户设置；它将重定向到个人资料屏幕。
然后转到密码和安全。您可以在“密码和安全”选项卡下找到您的用户名和访问密钥。

逐步理解代码

下面显示的是示例应用程序的测试脚本。

const { Builder, Browser, By } = require("selenium-webdriver");

// Define your LambdaTest authentication credentials
const USERNAME = "USERNAME";
const ACCESS_KEY = "ACCESS_KEY";

// Define the LambdaTest Grid host URL
const GRID_HOST = "hub.lambdatest.com/wd/hub";

// Define the capabilities for the test
const capability = {
  browserName: "Chrome",
  browserVersion: "118.0",
  "LT:Options": {
    username: USERNAME,
    accessKey: ACCESS_KEY,
    platformName: "Windows 10",
    build: "JavaScript build",
    project: "JavaScript Test",
    name: "Test 1",
    w3c: true,
    plugin: "node_js-node_js",
  },
};

async function example() {
  // Construct the LambdaTest Grid URL with authentication
  const gridUrl = "https://" + USERNAME + ":" + ACCESS_KEY + "@" + GRID_HOST;

  const driver = new Builder()
    .forBrowser(Browser.FIREFOX) // Specify the browser you want to use (Firefox in this case)
    .usingServer(gridUrl) // Set the LambdaTest Grid URL
    .withCapabilities(capability) // Assign the capabilities defined earlier
    .build();

  await driver.get(
    "https://www.lambdatest.com/selenium-playground/simple-form-demo"
  );

  await driver.findElement(By.id("user-message")).sendKeys("HELLO"); // Enter text in an input field
  await driver.findElement(By.id("showInput")).click(); // Click on a button

  await driver.quit();
}

example();

在上面的脚本中，添加您的 LambdaTest 凭据（用户名和访问密钥）或将它们设置在您的环境变量中。

从 LambdaTest Desired Capabilities Generator 生成您所需的 capabilities。

运行您的第一个 JavaScript 测试

在自动化 > Web 自动化下查找您的测试用例的详细信息。

您还可以探索其他可用选项，以便更好地了解 LambdaTest 平台。

如您所见，LambdaTest 功能的工作原理帮助您解决了本地网格问题。同样，我们可以使用 LambdaTest 并行测试功能来运行我们的测试脚本。

在 LambdaTest 上并行运行测试用例

我们需要遵循一些简单的步骤才能在云网格上并行执行测试。

运行以下命令安装 LambdaTest 提供的 npm TestCafe 插件。
```
npm install testcafe-browser-provider-lambdatest
```

控制台输出

添加凭据

对于 Linux/Mac

$ export LT_USERNAME=YOUR_LAMBDATEST_USERNAME
$ export LT_ACCESS_KEY=YOUR_LAMBDATEST_ACCESS_KEY

适用于 Windows

$ set LT_USERNAME=YOUR_LAMBDATEST_USERNAME
$ set LT_ACCESS_KEY=YOUR_LAMBDATEST_ACCESS_KEY

在测试文件所在的文件夹中创建一个 config.json 文件。

从 LambdaTest Capabilities Generator 生成您所需的 capabilities。

它看起来与此类似。

{
  "Chrome@118.0:Windows 10": {
    "browserVersion": "118.0",
    "LT:Options": {
      "platformName": "Windows 10",
      "build": "JavaScript Build on Cloud",
      "project": "TestCafe on Cloud",
      "name": "test 1",
      "w3c": true,
      "plugin": "node_js-testCafe"
    }
  }
}

现在运行以下命令。

testcafe "lambdatest:Chrome@118.0:Windows 10" 'test_example.js'

控制台输出

要查看您的测试结果，请访问 LambdaTest 自动化仪表板。

如您所见，两个测试在 LambdaTest 上同时运行。

结论

Selenium 是一套用于自动化在线浏览器交互的强大技术。我们发现了如何将 JavaScript 和 Selenium 结合起来，并实施了我们的第一个测试。我们还讨论了使用 TestCafe 等测试框架和并行运行测试以提高效率的好处。

我们还强调了在本地网格上进行测试的困难以及使用基于云的自动化测试平台（如 LambdaTest）的优势，它提供了一个可扩展且资源高效的选项。测试人员可以通过 Selenium、基于云的网格和并行执行来加快测试执行并提高测试覆盖率。

总而言之，Selenium 结合 JavaScript、现代测试框架、基于云的网格和并行执行，提供了一种全面有效的在线自动化和测试方法。它为测试人员提供了处理问题和生产高质量软件的工具。

使用 JavaScript 大规模运行自动化测试

目录

什么是 Selenium？

Selenium IDE

Selenium WebDriver

Selenium Grid

如何使用 JavaScript 设置 Selenium？

必备组件

控制台输出

使用 Selenium 编写第一个自动化测试脚本

获取网站标题

控制台输出

代码演练

向字段添加数据并单击按钮

输出

代码演练

如何使用 JavaScript 测试框架设置 Selenium？

控制台输出

输出

使用 TestCafe 框架进行并行测试执行

不带并行测试执行

带并行测试执行

本地 Grid 测试的挑战

在 LambdaTest 上运行测试用例

逐步理解代码

运行您的第一个 JavaScript 测试

在 LambdaTest 上并行运行测试用例

控制台输出

控制台输出

结论