如何使用Selenium和Java进行本地网站测试
#javascript #网络开发人员 #测试 #selenium

用户期望新功能和网站上线时无缝且用户友好。本地基础架构中的端到端website testing成为对此的不言而喻的关键要求。但是，如果在稍后或开发整个网站或应用程序之后执行此测试，则错误和代码问题的可能性会增加。这样的问题可能会造成比我们想象的更多的伤害。

根据一份报告，在糟糕的用户体验之后，有88％的用户不太可能返回网站。如果加载缓慢的网站和图像平均需要2秒以上，则每年损失多达26亿美元。另外，如果10个用户与其设备不兼容，则最多有8个用户停止访问网站。

仅查看这些数字，这是可怕的，这是由于在以后的阶段涉及的成本和精力，除了由于不良的印象和初次体验而丢失的客户群。

在这种情况下，在此类平台上必须进行预先测试网站，在这种情况下，该成本可以降低至最低。

Cloud testing平台（例如lambdatest）通过提供对真正的浏览器和操作系统的远程访问，在各种本地环境上帮助测试此类网站。这使您可以通过不同的配置验证网站的功能和兼容性，而不必设置复杂的test infrastructure。

测试网站，尤其是在生产环境中，可能是耗时且资源密集的。这可能会减慢开发，并使很难在早期发现错误和问题，从而延迟了开发人员的反馈。

本地网站测试使用自动化功能测试在开发人员的机器上测试网站。这些测试脚本可以设计为与CI/CD管道集成并为每个本地部署执行。通过早日识别问题，缩短反馈周期，从而节省时间和资源，从而增加了开发和测试的投资回报。

自动化本地网站测试使开发人员能够加快和简化测试过程。在这种情况下，有效的test case management至关重要，因为它允许在各种浏览器配置和OS版本上进行测试，以适应最终用户使用的不同系统。精心设计的test automation framework对于有效地进行本地测试至关重要。

因为我们将在此博客中讨论网站测试，所以Selenium是最佳选择。此外，由于该网站将在本地托管，因此我们将需要一个平台，该平台允许本地网站测试而不会干扰本地基础架构或开发人员的机器。

在本地网站测试的博客中，我们将了解有关local page testing及其在软件开发和测试周期中的优势的更多信息。它遵循我们如何为本地托管的网站编写自动化测试脚本并以有组织的方式执行该脚本，以免阻止本地基础架构，但仍然得到更快的反馈。

所以，让我们开始。

什么是本地网站测试？

本地网站测试使开发人员可以在其计算机或本地基础架构上托管和测试该网站。一旦开发人员充满信心，该网站就可以在生产之前将其移至实时测试服务器。

本网站是一个像真实的副本，并提供了一个威胁最少的地方测试它的地方。这包括检查cross browser compatibility，用户交互，页面上的不同链接或图像等等

。

这种配置与登台或预生产前test environment的理想情况有所不同，在QA团队将其用于生产之前，通常在测试周期中测试任何应用程序或网站。这是因为在阶段或预生产的环境中，正在运行更稳定的服务，或者在开发的后期进行了测试，并且需要更多具有外部资源的regression testing和/或integration testing。结果，我们不想冒险打破这种环境，而早期变化更容易出现错误。在这种情况下，本地托管和测试网站变得极为重要和有用。

有几种不同的方法来设置本地网站测试。一种常见的方法是使用本地开发服务器，例如XAMPP，该服务器可以安装在计算机上并配置为运行网站。在本地网站测试的此博客中，我们将使用同样的方式访问Localhost的网站。

需要在Safari上进行交叉浏览器测试的绝佳解决方案吗？忘记模拟器或模拟器使用真实的在线浏览器。尝试在safari browser online上测试Lambdatest。

本地网站测试的优点

使用本地网站测试有几个优点。

  • 加速的开发人员反馈：本地网站测试大大改善了反馈周期，因为开发人员可以快速更改代码并检查结果。这可以改善开发，从而带来更好的用户体验和更精致的最终产品。总体而言，它高度提高了开发过程的效率和有效性，并通过降低了发布后的任何重大问题的风险，可以在较短的时间内提供高质量的网站。

  • 执行速度：它允许开发人员快速测试其更改，而无需等待代码在testing environments上部署。这节省了很多时间，并帮助他们在开发周期中更快地迭代。

  • 具有成本效益：在本地测试网站具有很高的成本效益，因为它减少甚至消除了在实时服务器上测试，节省托管和关联的服务成本所需的时间。<<<<<<<<<<<< /p>

  • 更大的控制权和易于调试：开发人员在执行本地网站测试时可以更好地控制环境配置。此外，他们可以在计算机上使用各种调试工具，例如开发人员的控制台。

  • 与CI/CD管道集成：可以与Continuous Integration and Continuous Development (CI/CD)管道结合使用本地网站测试，以确保在部署之前对网站的更改进行彻底测试。

  • 非常适合敏捷：本地网站测试可能是Agile development环境中的有价值工具，因为它允许开发人员测试其网站的更改并迅速接收反馈。

    <

    < /li>

它增加了允许Devs和QA并行工作并提供更好的结果的优势。

为本地网站测试配置隧道

了解本地网站测试的基础和优势之后，让我们现在转到实施部分，看看我们如何在本地计算机上执行它。

在此博客中，我们将使用lambdatest平台测试本地托管的网站。

lambdatest cloud Selenium Grid支持使用Lambdatest隧道应用程序测试本地网站。该隧道可让您通过将本地系统连接到Lambdatest服务器通过基于SSH的集成来测试3000多个实际浏览器和OS组合。

。

％[https://youtu.be/KcqY1w_-LLE]

在最强大的Android emulator online上测试您的本机，混合和Web应用程序。

订阅LambdaTest YouTube Channel，并在automated browser testing，Cypress E2E testing，Mobile App Testing等周围的最新教程中保持更新。

此隧道可帮助您测试普通的HTML，CSS，PHP，Python或在Lambdatest上可用的操作系统，浏览器和屏幕分辨率的组合上保存在本地系统上的类似Web文件。该隧道遵循各种协议，例如Web套接字，HTTPS，SSH（Secure Shell）等，以帮助您通过系统和Lambdatest Cloud Servers之间的公司防火墙建立安全且独特的隧道连接。

在设置隧道并查看其工作原理之前，我们必须托管本地网站或网页。在此博客中，我们指的是这个Codepen项目。

如何托管本地网站？

要通过启动网页进行设置并验证它，请按照以下步骤

进行操作。

步骤1 ：打开上面提到的链接，导出项目，然后拉开下载的 *.zip。

步骤2 ：确保打开XAMPP或您使用的任何其他Web托管工具。如果您使用的是XAMPP，请在 Apache 服务 Actions 下进行服务。

步骤3 ：在第1步中复制并粘贴未拉链文件夹的内容，XAMPP htdocs 文件夹，以访问该网站上的网站：http://localhost.

这样，完成了本地网站的设置。接下来，我们转到隧道配置，看看如何使用相同的操作来执行本地网站的automated testing。

现在，在最强大的online emulator Android上测试您的本机，混合和Web应用程序。

如何配置隧道？

此博客涵盖从MacOS（Big Sur）的角度配置Lamdbatest隧道连接和testing locally hosted web pages。该配置在所有以前的版本中保持不变。

lambdatest还支持Windows和Linux机器上本地网站的隧道配置和测试。

步骤1 ：lambdatest平台上的Create your account并登录仪表板。

步骤2 ：单击在右上角配置隧道，然后选择命令行。然后，通过单击下载链接下载二进制文件。此二进制有助于建立与lambdatest云服务器的安全隧道连接。

步骤3：导航到您的下载文件夹并提取下载的zip。

步骤4：复制命令以从仪表板执行下载的二进制文件。命令看起来像这样。您可以在命令中提及可选的隧道名称，以确定要在多个隧道的情况下要执行测试的隧道。

    LT --user {user's login email} --key {user's access key} --tunnelName {user's tunnel name}

步骤5：执行命令以启动隧道并建立连接。在成功的隧道连接时，您将看到一个提示 - 您现在可以开始测试。请注意，隧道已被称为lambdatest。

步骤6：之后，请返回LambdaTest Dashboard验证隧道，然后使用Selenium with Java编写本地网站测试的自动化代码。

步骤7：导航到实时测试，选择浏览器测试，输入 local -host url 您想要测试并选择隧道名称。您可以从各种主要浏览器及其版本中选择您选择的测试配置以执行测试会话。选择配置后，单击开始按钮。

步骤8：此时，您应该被导航到本地主机URL。这表明设置已验证，我们可以编写自动化代码。

您是否正在使用Playwright进行自动测试？使用lambdatest云立即在50+浏览器/OS组合上立即运行剧作家测试脚本。免费注册。

演示：使用硒和Java的本地网站测试

完成隧道设置后，让我们尝试使用Selenium和Java实现同一本地网站的自动测试脚本。

我们将通过我们已经配置的隧道在lambda测试硒云网格上执行脚本。

演示的测试方案 localhost 使用隧道，然后单击第一个切换按钮。

使用Java使用Selenium的本地网站测试的示例测试脚本就像以下一个。

  package test.java;


    import java.net.MalformedURLException;
    import java.net.URL;
    import java.util.HashMap;


    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    import org.openqa.selenium.remote.RemoteWebDriver;
    import org.testng.annotations.AfterTest;
    import org.testng.annotations.BeforeTest;
    import org.testng.annotations.Test;


    public class TestLocalWebsiteUsingTunnel {


       WebDriver driver = null;
       String user_name = System.getenv("LT_USERNAME") == null ? "LT_USERNAME" : System.getenv("LT_USERNAME");
       String access_key = System.getenv("LT_ACCESS_KEY") == null ? "LT_ACCESS_KEY"
               : System.getenv("LT_ACCESS_KEY");


       @BeforeTest
       public void testSetUp() throws Exception {
           ChromeOptions browserOptions = new ChromeOptions();
           browserOptions.setPlatformName("Windows 10");
           browserOptions.setBrowserVersion("108.0");
           HashMap<String, Object> ltOptions = new HashMap<String, Object>();
           ltOptions.put("username", user_name);
           ltOptions.put("accessKey", access_key);
           ltOptions.put("project", "Local Website Testing using Selenium JAVA");
           ltOptions.put("build", "Local Website Testing");
           ltOptions.put("tunnel", true);
           ltOptions.put("selenium_version", "4.0.0");
           ltOptions.put("w3c", true);
           browserOptions.setCapability("LT:Options", ltOptions);


           try {
               driver = new RemoteWebDriver(
                       new URL("https://" + user_name + ":" + access_key + "@hub.LambdaTest.com/wd/hub"), browserOptions);
           } catch (MalformedURLException exc) {
               exc.printStackTrace();
           }
       }


       @Test(description = "Demonstration of Automated Local Website Testing using LambdaTest Tunnel")
       public void testLocalWebsite() throws InterruptedException {
           driver.get("https://localhost");
           driver.findElement(By.cssSelector("[for='cb1']")).click();
       }


       @AfterTest
       public void tearDown() {
           if (driver != null) {
               driver.quit();
           }
       }
    }

代码演练

步骤1：第一步是创建RemoteWebDriver的实例，因为我们将在Selenium Cloud Grid上执行代码。

步骤2：已经提到，由于我们使用的是lambdatest云网格和隧道进行本地网站测试，因此我们需要在环境变量中添加相同的凭据。

如果您没有凭据，请导航到lambdatest仪表板，单击屏幕右上角的配置文件图标，然后单击 profile 。。

您将在此处找到您的用户名和访问密钥。

步骤3：接下来，我们将功能添加为 testsetup（）以设置将传递到lambdatest网格的初始浏览器功能，以定义浏览器和操作系统配置。该方法将用 @beforetest annotation in TestNG注释，因为我们想在每个测试用例运行之前执行它。

这里要注意的最重要的事情是以下代码将隧道设置为 true 。该代码告诉lambdatest网格，此自动化脚本是Localhost网站测试的一部分，该隧道配置将用于执行。

步骤4：设置初始功能和隧道配置后，我们添加了测试用例功能 testlocalwebsite（） 内部，告诉驾驶员浏览 localhost ，然后单击第一个切换按钮。

单击此点击，我们使用了Web元素的CSS Selector。

步骤5：执行每个测试脚本后，我们必须关闭浏览器。为了执行相同的功能，添加了另一个函数，添加了 @aftertest 在每个测试执行后执行它。

一个全面的end to end Testing教程，涵盖了E2E测试的重要性，优势以及如何使用实时示例进行操作。

测试执行

到目前为止，我们已经了解了本地网站测试以及如何使用隧道在Lambdatest平台上执行相同的配置。现在，我们将执行测试脚本，并查看lambdatest仪表板上的test execution的外观。

由于我们使用了TestNG annotations，因此可以将测试脚本执行为testng运行。执行后，您将在仪表板上看到如下所示的结果。

导航至自动化> 构建以查看执行结果。

要查看执行详细信息，请单击右侧的会话名。您可以注意，测试导航的URL localhost ，隧道ID 与隧道名称相同，即 lambdatest ，在配置部分开始隧道时。

一个综合的UI testing教程，涵盖了UI测试，其重要性，好处以及如何使用实时示例进行操作。

结论

在此博客中有关如何使用Selenium和Java进行本地网站测试的博客中，我们了解了本地网站测试以及为什么它在软件开发世界中如此重要，并在Lambdatest平台上使用自动化测试脚本实现了相同的实现。
总体而言，本地网站测试是一个有效的解决方案，对于希望确保其网站进行彻底测试并且没有错误和问题之前的开发人员。

。

快乐的本地测试！