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

寒冰屋

于 2024-05-16 20:30:00 发布

阅读量8

点赞数

分类专栏： web前端文章标签： JavaScript 自动化测试 Selenium

原文链接：https://www.codeproject.com/Articles/5369410/Running-Automation-Tests-at-Scale-Using-JavaScript

版权

web前端专栏收录该内容

220 篇文章 4 订阅

订阅专栏

如何使用JavaScript设置Selenium？

先决条件

控制台输出

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

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

在LambdaTest上运行测试用例并行执行

结论

数字环境彻底改变了使用网络和移动平台的方式，极大地影响了用户如何以多种方式帮助做出更好的决策。因此，许多软件产品正试图为用户提供一流的数字体验。

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

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

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

源

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

什么是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。测试被分发到可用节点，以便在Hub上执行，Hub是测试注册的中心位置。

如何使用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语句充当代码的import语句。import语句可帮助您加载属于Selenium包的所有库。在下面的代码中，我们从Selenium包加载WebDriver。

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

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

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

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

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

使用该find_element()方法，我们可以处理您在inspect元素中找到的输入元素，并使用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，需要导入以下import语句：

使用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将找到测试并运行它们，为您提供完整的输出，包括通过/失败状态。您可以使用TestCafe的测试功能，同时通过将Selenium与TestCafe结合使用来自动化Selenium的Web测试工作。

使用TestCafe框架执行并行测试

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

考虑一个示例，我们需要执行2个测试用例，这将需要7-8秒。与此形成鲜明对比的是，如果我们使用并行测试执行，则时间为5-6秒。

这是如何做到的：

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

testcafe chrome --parallel 2 test_example.js

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

没有并行测试执行

通过并行测试执行

如您所见，整个测试脚本在 6秒内执行，与上面执行的测试相比少了2秒，后者需要 8秒。

在本地Grid上测试的挑战

在本地Grid上进行测试时，可能会出现许多挑战。更容易获得的物理设备和浏览器是重大问题之一。本地Grid使测试在各种设备和浏览器配置中具有挑战性，这可能会对测试覆盖率产生负面影响。

它还需要大量资源（包括基础架构设置、软件和硬件）来维护和管理。扩展Grid以应对不断增长的测试需求可能需要时间和金钱。

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

LambdaTest等AI驱动的测试编排和执行平台提供了一个云Grid，您可以在其中使用自动化测试框架（如带有JavaScript的Selenium）运行测试。它们使用TestCafe和Unittest等知名测试框架编写和执行自动化脚本变得简单，支持众多最新和旧版浏览器以及不同的操作系统。

在LambdaTest上运行测试用例

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

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

创建一个LambdaTest账户并完成所有必需的流程。
转到LambdaTest控制面板。要获取您的凭据，请导航到右上角的个人资料头像。
从右上角的个人资料图标中获取凭据，然后选择“帐户设置”;它将重定向到配置文件屏幕。

4.然后转到密码和安全。您可以在“密码和安全”选项卡下找到您的用户名和访问密钥。

逐步了解代码

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

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所需功能生成器中获取所需的功能。

运行您的第一个JavaScript测试

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

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

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

在LambdaTest上运行测试用例并行执行

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

1、运行以下命令以安装LambdaTest提供的npm TestCafe插件。

npm install testcafe-browser-provider-lambdatest

控制台输出

2、添加凭据

对于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

3、在测试文件可用的文件夹中创建一个config.json文件。

4、从LambdaTest功能生成器中获取所需的功能。

它看起来与此类似。

{
  "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"
    }
  }
}

5、现在运行以下命令。

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

控制台输出

6、要查看您的测试结果，请访问LambdaTest自动化控制面板。

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

结论

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

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

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

https://www.codeproject.com/Articles/5369410/Running-Automation-Tests-at-Scale-Using-JavaScript

寒冰屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript大规模运行自动化测试

数字环境彻底改变了使用网络和移动平台的方式，极大地影响了用户如何以多种方式帮助做出更好的决策。因此，许多软件产品正试图为用户提供一流的数字体验。在交付高质量应用程序时，测试在确保应用程序满足开发要求方面起着至关重要的作用。这意味着建立高内部QA标准并投资于自动化测试，以加快发布周期和快速开发人员反馈。
复制链接

扫一扫