Question

想知道是否有教程学习如何使用此工具测试这种类型的更改？我的意思是......我需要在组件中引入CSS类更改，但我不知道如何测试它...我已经检查了youtube但是我不太明白最好的方法是什么。 ..

Answer 1

编辑：Applitools客户支持非常有帮助 - 请考虑与他们联系以获得更多个人帮助。

Applitools是一种云服务，能够智能地检测人眼可见的UI变化。它通过将自动端到端测试期间拍摄的屏幕截图与您批准的上一次测试期间拍摄的基线图像进行比较来实现。我之所以提到这一点，是因为您将问题标记为单元测试。这不是单元测试，因为它需要启动浏览器（自动 - 使用Selenium）来运行自动化测试。

根据您的问题 - 您应该确保在课程更改之前有一个包含讨论中的组件的基线图像（通过运行调用Applitools Eyes API创建检查点（eyes.checkWindow）的自动化测试来执行此操作您的测试到达包含此组件的页面。然后，批准新测试作为基准，应用您的课程更改并再次运行测试。

如果您的更改后出现视觉差异，Applitools会通知您。因此，例如，如果这只是一个引擎盖下的变化 - 你将看不到视觉差异，但如果这实际上影响了UI，那么你将看到视觉差异。如果您对这种差异感到满意，您只需批准此次运行作为新的基线。

为了展示一个例子，我将使用适用于Selenium + Java的Applitools教程。查看评论 - 您运行一次，更改课程并再次运行：

import com.applitools.eyes.Eyes;
import com.applitools.eyes.RectangleSize;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import java.net.URISyntaxException;

public class TestApplitoolsWebsite {

  public static void main(String[] args) throws URISyntaxException, InterruptedException {

    WebDriver driver = new FirefoxDriver();

    Eyes eyes = new Eyes();
    // This is your api key, make sure you use it in all your tests.
    eyes.setApiKey("YOUR_API_KEY");

    try {
      // Start visual testing with browser viewport set to 1024x768.
      // Make sure to use the returned driver from this point on.
      driver = eyes.open(driver, "Applitools", "Test Web Page", new RectangleSize(1024, 768));

      driver.get("http://applitools.com");

      // Visual validation point #1
      eyes.checkWindow("Main Page");

      driver.findElement(By.cssSelector(".features>a")).click();

      // Visual validation point #2
      // Let's assume this page contains the class you'll change
      eyes.checkWindow("Features page");

      // End visual testing. Validate visual correctness.
      eyes.close();
    } finally {
      // Abort test in case of an unexpected error.
      eyes.abortIfNotClosed();
      driver.close();
    }
  }
}

当然 - 如果您的课程更改会影响应用程序/网站中的多个位置，那么最好确保您的测试涵盖所有这些位置，并且您可以截取所有这些位置的屏幕截图。

使用Applitools进行可视化测试简单的CSS类更改

1 个答案: