目录
数字环境彻底改变了使用网络和移动平台的方式,极大地影响了用户如何以多种方式帮助做出更好的决策。因此,许多软件产品正试图为用户提供一流的数字体验。
在交付高质量应用程序时,测试在确保应用程序满足开发要求方面起着至关重要的作用。这意味着建立高内部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