如何在 JavaScript 中使用 Selenium 自动化浏览器测试

自动化浏览器测试对于任何 Web 开发人员来说都是必须的，以确保他们的应用程序正常运行。在这篇文章中，我们将逐步使用 JavaScript 设置 Selenium，以自动执行简单的浏览器任务：打开网页并单击按钮。

先决条件

要继续操作，您需要：

• Node.js 和 npm 已安装。
• 已安装 Google Chrome 和 ChromeDriver（或其他浏览器及其各自的驱动程序）。

第 1 步：设置您的项目

首先，为您的项目创建一个新文件夹。打开终端并运行：

mkdir selenium-test
cd selenium-test

接下来，初始化一个新的 Node.js 项目：

npm init -y

此命令生成一个 package.json 文件，用于跟踪项目的依赖项。

第 2 步：安装 Selenium WebDriver

我们将使用 npm 安装 Selenium WebDriver 和 ChromeDriver：

npm install selenium-webdriver chromedriver --save

这些包提供了使用 Selenium 自动化 Chrome 所需的库和工具。

第 3 步：编写 Selenium 脚本

在项目文件夹中创建一个名为 test.js 的新文件。该脚本将打开一个网页，等待按钮变为可单击状态，然后单击它。

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

第 4 步：运行脚本

要执行脚本，请运行：

node test.js

Chrome 将打开并执行脚本中定义的操作。观察控制台中指示每个步骤进度的日志。

故障排除

• StaleElementReferenceError：当 DOM 在找到元素后发生更改时，会发生这种情况。为了避免这种情况，请始终在与元素交互之前重新定位元素。
• Timeouts：如果元素加载时间较长，请增加 driver.wait() 中的超时。

结论

您现在已经有了使用 Selenium 和 JavaScript 进行自动化浏览器测试的基本设置。此设置可以轻松扩展以包括更复杂的交互、检查和验证步骤。

请记住保持驱动程序更新以匹配您的浏览器版本，并考虑在 CI/CD 环境中使用无头模式。

如果您想在 Azure 中托管它，请查看我的其他帖子：https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -发送电子邮件通知失败-2aio

测试愉快！