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

Question

想知道是否有教程可以学习如何使用此工具测试这种类型的更改？我是说..。我需要在组件中引入CSS类更改，但我不知道如何测试它……我查过youtube，但我不太明白怎样才是最好的方法……

Answer 1

编辑: Applitools客户支持非常有用-考虑联系他们以获得更个人化的帮助。

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

根据您的问题-在您的类更改之前，您应该确保您有一个包含讨论中的组件的基准映像(通过运行一个自动化测试来实现，该测试在您的测试到达包含此组件的页面时调用Applitools Eyes来创建一个检查点(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();
    }
  }
}

当然，如果你的类改变影响了应用程序/网站中的几个地方，那么最好确保你的测试覆盖了所有这些地方，并对所有这些地方进行了屏幕截图。