通过视觉验证简化自动化

When automating scenarios, we have to be very careful to capture all of the various verification points that a tester would process when executing a test. I’ve written about this issue in Adding a Peripheral View to Test Automation, and stressed how important it is to make sure we script all necessary assertions into a given scenario. But I’ve found a better way to do this! Visual UI testing.

作为自动化工程师，我感到有很大的压力要跳出框框思考，并确保不遗漏任何断言。 视觉验证减轻了这种压力，并使我的自动化脚本变得更快，更简单。

让我告诉你我的意思。

这是我为一些UI自动化研讨会构建的应用程序。 它是一个简单的网格，显示有关测试自动化的书籍。 通过在文本字段中搜索，用户可以将书籍过滤为仅与查询匹配的书籍。

WITHOUT VISUAL VALIDATION

如果没有视觉验证，我将编写一个方案以确保所搜索的书是搜索完成后唯一可见的书。 在这种特殊情况下，我写了以下内容以确保当我搜索“自动化”时，我期望的两本书都是所显示的。

  @Test
  public void testSearchByPartialTitle() {
    String title1 = "Test Automation in the Real World";
    String title2 = "Experiences of Test Automation";

    page.search("Automation");

    assertTrue("Book not found: " + title1, page.isBookVisible(title1));
    assertTrue("Book not found: " + title2, page.isBookVisible(title2));
    assertEquals("Number of visible books is incorrect", 2, page.getNumberOfVisibleBooks());
  }

为了支持这种情况，我需要在框架中的Page Object类中添加两个方法：isBookVisible和getNumberOfBooks（加上其他支持方法以及元素定位器）：

  public boolean isBookVisible(String title){
    List<WebElement> books = findVisibleBooks();

    for(WebElement book : books) {
      if(title.equalsIgnoreCase(book.findElement(titleAttribute).getText())){
        return true;
      }
    }

    return false;
  }

  public int getNumberOfVisibleBooks() {
    return findVisibleBooks().size();
  }

  private List<WebElement> findVisibleBooks() {
    return driver.findElements(visibleBooks);
  }

即使使用所有这些代码，我也只验证书名是正确的。 屏幕上有太多东西可能出了错，例如作者，价格，书的封面……甚至还没有覆盖到整体外观！

WITH VISUAL VALIDATION

为了全面验证该书的属性，我们的方法需要更加健壮。 但是，除了添加更多代码之外，我实际上可以删除代码并通过视觉验证获得更大的覆盖范围。

这是我修改后的测试方法。 请注意，我已经用三行视觉验证取代了上面的三行断言，并且通过这次交换，我对测试的了解也更多了。 这种交换也消除了对上面显示的Page Object代码的需要，因此我不再需要维护它。 那是19行代码以及我可以删除的2行元素定位符。 现在，此方案将验证整个页面，不仅确保我的书（及其所有属性）在搜索后出现，而且外观和感觉也很完美。

  @Test
  public void testSearchByPartialTitle() {
    page.search("Automation");

    eyes.open(driver, "Automation Bookstore",  "testSearchByPartialTitle");
    eyes.checkWindow();
    eyes.close();
  }

我什至可以通过提取可视化验证代码来使此测试方法更小，尤其是因为它将在我的大量测试中重复使用。 在基础测试类中，我可以将三行可视验证代码移动到实用程序方法中。 这样，从该类继承的任何测试类都可以访问此类：

   protected void validateWindow() {
        eyes.open(driver, "Automation Bookstore",  Thread.currentThread().getStackTrace()[2].getMethodName());
        eyes.checkWindow();
        eyes.close();
    }

然后在测试本身中，我们只剩下5行代码，实际主体只有2行！

  @Test
  public void testSearchByPartialTitle(){
    page.search("Automation");
    validateWindow();
  }

通过涵盖更多验证，可以很好地实现此目的-确保我们想要存在的所有内容确实存在，确保我们不想存在的所有内容都不存在，并确保页面的整体外观是所期望的。 更少的代码和更少的压力！ 这样做的好处还在于有 to be a full replacement to the functional validations. I can easily keep any assertions I need (e.g. backend validation) and still use the visual validation for the rest. I can essentially 有 it all!

_{Originally posted on angiejones.tech}

from: https://dev.to//techgirl1908/simplifying-automation-with-visual-validation-4an6