使用 Selenium WebDriver 自动化您的功能测试

本文适用于希望花更少时间测试其 Web 应用程序前端但仍希望确保每个功能都能正常工作的 Web 开发人员。 它将通过使用 Selenium WebDriver 自动执行重复的在线任务来节省您的时间。 您将找到自动化和测试 WordPress 登录功能的分步示例，但您也可以将该示例改编为任何其他登录表单。

什么是硒，它对您有何帮助？

Selenium 是一个用于 Web 应用程序自动化测试的框架。 使用 Selenium，您基本上可以自动执行浏览器中的每项任务，就好像真人要执行任务一样。 用于向不同浏览器发送命令的接口称为 Selenium WebDriver。 该接口的实现适用于所有主流浏览器，包括 Mozilla Firefox、Google Chrome 和 Internet Explorer。

使用 Selenium WebDriver 自动化您的功能测试

您是哪种类型的 Web 开发人员？ 您是在每次部署后测试 Web 应用程序的所有关键功能的纪律严明的类型吗？ 如果是这样，您可能会对这种重复测试所消耗的时间感到恼火。 或者你是那种不关心测试关键特性并且总是认为“我应该测试更多，但我更愿意开发新东西”的类型。 如果是这样，您可能只是偶然发现错误，或者当您的客户或老板抱怨它们时。

在德国某知名网店工作了很长时间，我一直属于第二类：想到网店的新功能太激动了，完全不喜欢去每次部署新软件后，再次覆盖所有以前的功能。 因此，该策略或多或少是希望所有关键功能都能正常工作。

有一天，我们的转化率严重下降，并开始挖掘我们的网络分析工具来寻找这种下降的根源。 我们花了很长时间才发现自上次软件部署以来我们的结帐无法正常工作。

那天我开始做一些关于自动化我们的 Web 应用程序测试过程的研究，我偶然发现了 Selenium 和它的 WebDriver。 Selenium 基本上是一个允许您自动化 Web 浏览器的框架。 WebDriver 是关键接口的名称，它允许您向所有主要浏览器（移动和桌面）发送命令并像真实用户一样使用它们。

使用 Selenium WebDriver 准备第一个测试

首先，我有点怀疑 Selenium 是否适合我的需求，因为该框架是 Java 中最常用的，而且我当然不是 Java 专家。 后来，我了解到作为 Java 专家并不一定要利用 Selenium 框架的强大功能。

作为一个简单的第一个测试，我测试了我的一个 WordPress 项目的登录。 为什么选择 WordPress？ 仅仅因为使用 WordPress 登录表单是一个示例，每个人都可以比我参考一些自定义 Web 应用程序更容易遵循。

开始使用 Selenium WebDriver 需要什么？ 因为我决定使用 Java 中最常见的 Selenium 实现，所以我需要设置我的小型 Java 环境。

如果您想效仿我的示例，可以使用您选择的 Java 环境。 如果您还没有设置，我建议您安装 Eclipse 并确保您能够在 Java 中运行一个简单的“Hello world”脚本。

因为我想在 Chrome 中测试登录，所以我确保 Chrome 浏览器已经安装在我的机器上。 这就是我在准备中所做的一切。

下载 Chrome 驱动程序

所有主流浏览器都提供自己的 WebDriver 接口实现。 因为想在 Chrome 中测试 WordPress 登录，所以需要获取 Chrome 的 WebDriver 实现：ChromeDriver。

我提取了 ZIP 存档并将可执行文件chromedriver.exe存储在我以后可以记住的位置。

在 Eclipse 中设置我们的 Selenium 项目

对于经常使用 Java 和 Eclipse 的人来说，我在 Eclipse 中采取的步骤可能是非常基本的。 但是对于像我这样对此不太熟悉的人，我将介绍各个步骤：

1. 打开 Eclipse。
2. 单击“新建”图标。
   

   

3. 选择向导以创建一个新的“Java 项目”，然后单击“下一步”。
   

   

4. 为您的项目命名，然后单击“完成”。
   

   

5. 现在您应该在屏幕左侧看到您的新 Java 项目。
   

   

将 Selenium 库添加到我们的项目中

现在我们有了我们的 Java 项目，但是 Selenium 仍然缺失。 所以，接下来，我们需要将 Selenium 框架引入到我们的 Java 项目中。 以下是我采取的步骤：

1. 下载最新版本的 Java Selenium 库。
   

   

2. 提取存档，并将文件夹存储在您可以轻松记住的位置。
3. 返回 Eclipse，然后转到“项目”→“属性”。
   

   

4. 在对话框中，转到“Java Build Path”，然后注册“Libraries”。
5. 单击“添加外部 JAR”。
   

   

6. 使用 Selenium 库导航到刚刚下载的文件夹。 突出显示所有.jar文件并单击“打开”。
   

   

7. 对子文件夹libs中的所有.jar文件也重复此操作。
8. 最终，您应该会在项目的库中看到所有.jar文件：
   

   

而已！ 到目前为止，我们所做的一切都是一次性的任务。 您现在可以将此项目用于所有不同的测试，并且您无需再次为每个测试用例执行整个设置过程。 有点整洁，不是吗？

创建我们的测试类并让它打开 Chrome 浏览器

现在我们有了 Selenium 项目，但接下来呢？ 为了看看它是否有效，我想尝试一些非常简单的方法，比如打开我的 Chrome 浏览器。

为此，我需要创建一个新的 Java 类，我可以从中执行我的第一个测试用例。 在这个可执行类中，我复制了几行 Java 代码，不管你信不信，它成功了！ 神奇的是，Chrome 浏览器打开了，几秒钟后又自行关闭了。

自己试试：

1. 再次单击“新建”按钮（当您在新项目的文件夹中时）。
   

   

2. 选择“类”向导，然后单击“下一步”。
   

   

3. 为您的类命名（例如，“RunTest”），然后单击“完成”。
   

   

4. 将新类中的所有代码替换为以下代码。 您唯一需要更改的是计算机上chromedriver.exe的路径：
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. 保存您的文件，然后单击播放按钮运行您的代码。
   

   

6. 如果您已正确完成所有操作，代码应该会打开一个新的 Chrome 浏览器实例并在此后不久将其关闭。
   

   

测试 WordPress 管理员登录

现在我很乐观，我可以自动化我的第一个小功能测试。 我希望浏览器导航到我的一个 WordPress 项目，登录到管理区域并验证登录是否成功。 那么，我需要查找哪些命令？

1. 导航到登录表单，
2. 找到输入字段，
3. 在输入字段中输入用户名和密码，
4. 点击登录按钮，
5. 比较当前页面的标题，看看是否登录成功。

同样，在我对代码完成所有必要的更新并单击 Eclipse 中的运行按钮后，我的浏览器开始通过 WordPress 登录神奇地自行运行。 我成功运行了我的第一个自动化网站测试！

如果您想自己尝试，请将 Java 类的所有代码替换为以下内容。 之后我将详细介绍代码。 在执行代码之前，您必须将四个值替换为您自己的值：

1. 您的chromedriver.exe文件的位置（如上），

2. 您要测试的 WordPress 管理员帐户的 URL，

3. WordPress用户名，

4. WordPress 密码。

然后，保存并让它再次运行。 它将打开 Chrome，导航到您的 WordPress 网站的登录名，登录并检查当前页面的h1标题是否为“仪表板”。

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

如果您已正确完成所有操作，您在 Eclipse 控制台中的输出应如下所示：

了解代码

因为您可能是一名 Web 开发人员，并且至少对其他编程语言有基本的了解，所以我相信您已经掌握了代码的基本思想：我们为调用的特定测试用例创建了一个单独的方法testWordpressLogin 。我们的主要方法。

根据方法返回 true 还是 false，您将在控制台中获得一个输出，告诉您此特定测试是通过还是失败。

这不是必需的，但这样您可以轻松地向此类添加更多测试用例，并且仍然具有可读代码。

现在，一步一步，这是我们的小程序中发生的事情：

1. 首先，我们告诉我们的程序在哪里可以找到 Chrome 的特定 WebDriver。
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. 我们打开 Chrome 浏览器并最大化浏览器窗口。
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. 这是我们跳入我们的子方法并检查它是否返回真或假的地方。
   

    if (testWordpresslogin()) …

4. 我们的子方法中的以下部分可能不直观理解：
   try{…}catch{…}块。 如果一切按预期进行，则只会执行try{…}中的代码，但如果在执行try{…}时出现任何问题，则继续执行catch{} 。 每当您尝试使用findElement定位元素并且浏览器无法定位该元素时，它会抛出异常并执行catch{…}中的代码。 在我的示例中，只要出现问题并执行catch{} ，测试就会被标记为“失败”。
5. 在子方法中，我们首先导航到我们的 WordPress 管理区域并通过查找用户名和密码的 ID 来定位用户名和密码的字段。 此外，我们在这些字段中输入给定的值。
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. 填写登录表单后，我们通过其 ID 找到提交按钮并单击它。
   

    webDriver.findElement(By.id("wp-submit")).click();

7. 为了直观地跟踪测试，我在此处加入了 7 秒的暂停（7000 毫秒 = 7 秒）。
   

    Thread.sleep(7000);

8. 如果登录成功，当前页面的h1标题现在应该是“Dashboard”，指的是 WordPress 管理区域。 因为h1标题应该在每个页面上只存在一次，所以我在这里使用了标签名称来定位元素。 在大多数其他情况下，标签名称不是一个好的定位器，因为 HTML 标签名称在网页上很少是唯一的。 找到h1后，我们使用getText()提取元素的文本，并检查它是否等于字符串“Dashboard”。 如果登录不成功，我们将找不到“Dashboard”作为当前的h1 。 因此，我决定使用h1来检查登录是否成功。
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. 如果子方法的前一部分出现任何问题，程序将直接跳转到下一部分。 catch块将打印发生在控制台上的异常类型，然后将false返回给 main 方法。
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

调整测试用例

如果您想调整和添加自己的测试用例，这就是有趣的地方。 你可以看到我们总是调用webDriver对象的方法来对 Chrome 浏览器做一些事情。

首先，我们最大化窗口：

 webDriver.manage().window().maximize();

然后，在一个单独的方法中，我们导航到我们的 WordPress 管理区域：

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

我们可以使用webDriver对象的其他方法。 除了以上两个，你可能会经常使用这个：

 webDriver.findElement(By. …)

findElement方法帮助我们在 DOM 中找到不同的元素。 有不同的选项来查找元素：

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

如果可能，我建议使用By.id因为元素的 ID 应该始终是唯一的（例如，与className不同），并且如果 DOM 的结构发生更改，它通常不会受到影响（例如，与xPath不同） .

注意：您可以在此处阅读有关使用 WebDriver 定位元素的不同选项的更多信息。

一旦您使用findElement方法获得了一个元素，您就可以调用该元素的不同可用方法。 最常见的是sendKeys 、 click和getText 。

我们使用sendKeys来填写登录表单：

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

我们已经使用click通过单击提交按钮来提交登录表单：

 webDriver.findElement(By.id("wp-submit")).click();

并且getText已用于在单击提交按钮后检查h1中的文本：

 webDriver.findElement(By.tagName("h1")).getText()

注意：请务必检查可用于元素的所有可用方法。

结论

自从我发现 Selenium WebDriver 的强大功能后，我作为 Web 开发人员的生活就发生了变化。 我只是喜欢它。 我越深入这个框架，我发现的可能性就越多——在 Chrome、Internet Explorer 和 Firefox 甚至我的智能手机上同时运行一个测试，或者自动截取不同页面的屏幕截图并进行比较。 今天，我使用 Selenium WebDriver 不仅用于测试目的，还用于自动化网络上的重复性任务。 每当我看到有机会在 Web 上自动化我的工作时，我只需复制我最初的 WebDriver 项目并将其调整到下一个任务。

如果您认为 Selenium WebDriver 适合您，我建议您查看 Selenium 的文档以了解 Selenium 的所有可能性（例如使用 Selenium Grid 在多个（移动）设备上同时运行任务）。

我期待听到您是否发现 WebDriver 和我一样有用！