Автор|Мартин Шнайдер Компиляция|Флин Источник|канал
Наиболее распространенным случаем визуального регрессионного тестирования является тестирование с использованием исходных изображений. Тем не менее, различные аспекты визуального тестирования также заслуживают обсуждения. Мы рассмотрим сопоставление шаблонов (с OpenCV), тестирование макета (с Galen) и OCR (с Tesseract), а также покажем, как эти инструменты можно легко интегрировать в существующие тесты Appium и Selenium.
Мы используем Java (и оболочки Java для OpenCV и Tesseract), но аналогичные решения возможны и с другими технологическими стеками.
Эта статья является дополнением к краткому докладу (в более коротком формате), сделанному на конференциях Taqelah и Selenium 2020 в Сингапуре в сентябре 2020 года. Полнофункциональную демонстрацию и более подробную информацию см.www.justtestlah.qa/
Я надеюсь, что это краткое изложение поможет вам выбрать инструменты, которые больше всего повлияют на ваш вариант использования, и даст вам некоторые идеи о том, как интегрировать их в свой собственный набор инструментов.
соответствие шаблону
Задача сопоставления с шаблоном состоит в том, чтобы найти заданное изображение (шаблон) на текущем экране.
Где Уолдо?
Для мобильного тестирования Appium добавил эту функциональность в виде стратегии поиска изображений в версии 1.9. (Дополнительную информацию можно найти в документации и более ранних руководствах.) Идея состоит в том, чтобы передать строковое представление изображения в кодировке Base64 в WebDriver.
- Ранние уроки:приложение IU купить pro.com/editions/32…
Используя локатор изображений, вы можете взаимодействовать с результирующим элементом, как с любым другим веб-элементом. Например:
WebElement element =
driver.findElementByImage(base64EncodedImageFile);
element.click();
или
By image = MobileBy.image(base64EncodedImageFile);
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(image)).click();
Подход, принятый разработчиками, заключался в том, чтобы добавить функциональность к части сервера Appium и использовать OpenCV (который станет зависимостью экземпляра, на котором работает сервер Appium) для расширения реальных возможностей распознавания изображений.
Интересно, что поток между клиентом и сервером выглядит так:
-
Скриншот запроса с сервера Appium.
-
Отправьте скриншоты и шаблоны на сервер Appium для сопоставления.
Это не кажется идеальным, особенно если мы хотим сопоставить несколько шаблонов на одном экране.
Когда я впервые внедрил сопоставление шаблонов в 2018 году (тогда еще не было известно, что команда Appium уже работает над сопоставлением шаблонов), я также выбрал OpenCV и запустил его на стороне клиента. Используя оболочку OpenCV Java, суть моего кода выглядит так:
Mat result = new Mat(resultRows, resultCols, CvType.CV_32FC1);
Imgproc.matchTemplate(image, templ, result, Imgproc.TM_CCOEFF_NORMED);
MinMaxLocResult match = Core.minMaxLoc(result);
if (match.maxVal >= threshold) {
// found
}
Этот подход не требует дополнительного запроса к серверу Appium, как описано выше. На самом деле, он не требует никакой функциональности WebDriver, кроме функциональности скриншотов. Он также работает с Selenium и Appium. Тем не менее, это также увеличивает зависимость от OpenCV, на этот раз от экземпляра, выполняющего выполнение теста.
Я обернул оба вышеуказанных метода (выполнение на стороне клиента и на стороне сервера) в интерфейс TemplateMatcher, чтобы продемонстрировать его использование (представьте себе, что это PoC).
Вы можете найти более подробную информацию и примеры в JustTestLah!
- Среда тестирования JTL:просто тестовый блок.
тест компоновки
Другой тип визуального теста включает проверку макета страницы или экрана. Вы можете сделать это с помощью сравнения изображений, которое также неявно проверяет макет. Более простой способ — использовать специальный инструмент для тестирования макетов, такой как Galen (на мой взгляд, один из самых недооцененных фреймворков для тестирования пользовательского интерфейса).
Гален использует спецификации для каждого экрана, чтобы определить все (важные) элементы на экране, их размеры и абсолютные или относительные позиции между ними.
Возьмем в качестве примера страницу поиска Google:
Мы можем выразить это, используя следующую спецификацию:
SEARCH_FIELD:
below LOGO
centered horizontally inside viewport
visible
LOGO:
above SEARCH_FIELD
centered horizontally inside viewport
width < 100% of SEARCH_FIELD/width
visible
SEARCH_BUTTON:
near LUCKY_BUTTON 20px left
visible
Обратите внимание, что JustTestLah используется выше! Синтаксис фреймворка (обращение к элементам пользовательского интерфейса с помощью уникальных ключей, определенных в файле YAML объекта страницы). В чистом Galen они должны быть определены в верхней части файла спецификации:
@objects
LOGO id hplogo
SEARCH_FIELD css input[name=q]
...
Есть несколько способов выполнить эти проверки. Я предпочитаю, чтобы метод проверки был частью абстрактного класса BasePage:
private T verify() {
String baseName = this.getClass().getSimpleName();
String baseFolder = this.getClass().getPackage().getName().replaceAll("\\.", File.separator);
String specPath = baseFolder
+ File.separator
+ configuration.getPlatform()
+ File.separator
+ baseName
+ ".spec";
galen.checkLayout(specPath, locators);
return (T) this;
}
Таким образом, всякий раз, когда мы взаимодействуем с экраном в первый раз, мы можем легко вызвать проверку из наших тестов (кстати, я использую аналогичный подход для интеграции Applitools для визуального тестирования):
public class GoogleSteps extends BaseSteps {
private GooglePage google;
@Given("I am on the homepage")
public void homepage() {
google.verify().someAction().nextAction();
}
}
Оптическое распознавание символов (OCR)
Другой формой визуального утверждения является оптическое распознавание символов, аббревиатура которого OCR. Это полезно, когда текст по какой-то причине отображается как изображение и не может быть проверен с помощью стандартных инструментов тестирования.
Это также может быть интересно тем, кто использует Selenium для парсинга веб-страниц вместо тестирования, так как это одна из контрмер, которую разработчики веб-сайтов принимают, чтобы усложнить задачу.
Мы используем Tesseract (инструмент OCR, первоначально разработанный HP в 1980-х годах и в настоящее время спонсируемый Google).
Наш пример не самый практичный, но чтобы продемонстрировать мощь Tesseract в обнаружении различных типов шрифтов: мы проверим, что логотип Google действительно пишется как «Google»:
public class GooglePage extends BasePage<GooglePage> {
@Autowired private OCR ocr;
...
public String getLogoText() {
return ocr.getText($("LOGO"));
}
}
public class GoogleSteps extends BaseSteps {
private GooglePage google;
...
@Then("the Google logo shows the correct text")
public void checkLogo() {
assertThat(google.getLogoText()).isEqualTo("Google");
}
}
Используемый сервис OCR выглядит следующим образом:
public class OCR implements qa.justtestlah.stubs.OCR {
private Logger LOG = LoggerFactory.getLogger(OCR.class);
private TakesScreenshot driver;
private Tesseract ocr;
@Autowired
public OCR(Tesseract ocr) {
this.ocr = ocr;
}
/**
* @param element {@link WebElement} element to perform OCR on
* @return recognised text of the element
*/
public String getText(WebElement element) {
return getText(element.getScreenshotAs(OutputType.FILE));
}
/** @return all text recognised on the screen */
public String getText() {
return getText(getScreenshot());
}
private String getText(File file) {
LOG.info("Peforming OCR on file {}", file);
try {
return ocr.doOCR(file).trim();
} catch (TesseractException exception) {
LOG.warn("Error performing OCR", exception);
return null;
}
}
/**
* Usage:
*
* <pre>
* new OCR().withDriver(driver);
* </pre>
*
* @param driver {@link WebDriver} to use for capturing screenshots
* @return this
*/
public OCR withDriver(WebDriver driver) {
this.driver = (TakesScreenshot) driver;
return this;
}
/**
* Usage:
*
* <pre>
* new OCR().withDriver(driver);
* </pre>
*
* @param driver {@link TakesScreenshot} to use for capturing screenshots
* @return this
*/
public OCR withDriver(TakesScreenshot driver) {
this.driver = driver;
return this;
}
private File getScreenshot() {
return driver.getScreenshotAs(OutputType.FILE);
}
@Override
public void setDriver(WebDriver driver) {
this.driver = (TakesScreenshot) driver;
}
}
Для этого требуется, чтобы Tesseract был установлен на экземпляре, на котором выполняются тесты. Полный исходный код и демо-версию можно найти на JustTestLah! тестовая структура.
Оригинальная ссылка:medium.com/better-pro Страна…
Добро пожаловать на сайт блога Panchuang AI:panchuang.net/
sklearn машинное обучение китайские официальные документы:sklearn123.com/
Добро пожаловать на станцию сводки ресурсов блога Panchuang:docs.panchuang.net/