Автоматизируем наши глаза!

Чтобы вам было удобнее читать, вы можете прочитать эту статью в моем блоге на philscode.com.

Настройка сцены 🖼️

Вечер пятницы, светит солнце 🌞, вы только что развернули последние изменения пользовательского интерфейса в рабочей среде. Как только вы собираетесь поднять ноги и заказать еду на вынос…

Эти визгливые голоса, доносящиеся со всех сторон 😨;

Ясно, что здесь что-то не так. Проверим сборку…

Юнит-тестирование пройдено ✅
Компонентное тестирование пройдено ✅
Даже E2E-тестирование пройдено! ✅

Это должно быть бэкэнд, ребята, верно? Мы, фронтенд-разработчики, никогда не допускаем ошибок. 😀

Пришло время открыть эти инструменты разработки и взглянуть на них глубже.

Никаких сетевых ошибок, никакого тревожного вывода на консоль. Ждать…

Что это…

/* Todo: debug code - remove before deploy */ body 
{   
  transform: scale(0.1);   
  opacity: 0.1; 
}

Вот оно! Код отладки, который мы добавили, мы знали, что удалим, поскольку добавили Todo комментарий! Теперь все тело документа уменьшено на 1/10, а его непрозрачность установлена ​​на 0,1 😧. Это означает, что весь контент там, просто практически невидим для наших глаз!

Но подождите... Почему тесты прошли? 🕵️

В большинстве случаев тесты просто захватывают элемент и проверяют видимость (непрозрачность > 0) или утверждают некоторый текст, но никогда не проверяют страницу визуально. В конце концов, мы не можем автоматизировать наше зрение!

Или мы можем…

Хотя это был экстремальный пример для демонстрации проблемы, это все же очень правдоподобный сценарий. Сегодня такая проблема может возникнуть в небольшом, но чрезвычайно важном разделе вашего приложения. Например, кнопка «Отправить».

Давайте посмотрим, как мы можем использовать визуальное тестирование, чтобы предотвратить подобные проблемы.

В качестве небольшого примечания не стесняйтесь связаться со мной в Твиттере, чтобы получить больше сообщений, подобных этому.

Теперь на тестирование!

Визуальное тестирование 🧪

Обзор 📓

Мы будем использовать Cypress вместе с бесплатным плагином сообщества cypress-plugin-snapshots.

Cypress будет использоваться для управления браузером, а дополнительный плагин cypress-plugin-snapshots будет использоваться для визуального тестирования.

Существует огромное количество доступных подключаемых модулей для визуального тестирования с помощью Cypress, от бесплатных до платных, поэтому не забудьте проверить их все, прежде чем принять решение.

Тест 📝

Мы собираемся создать 2 очень простых теста для нашей демонстрации. Оба они будут тестировать одно и то же: один — стандартный тест Cypress, а другой — визуальный тест.

Тест будет включать в себя подключение к https://philscode.com, щелчок по первому сообщению в блоге и проверку существования заголовка сообщения.

Проверьте ниже ручную перспективу этого теста.

Приступаем к кодированию! 💻

Предпосылка

Если у вас не установлен Node.js, перейдите на nodejs.org, чтобы настроить его, прежде чем продолжить.

Закладка фундамента ⚙️

Давайте получим package.json, без вопросов, введя приведенную ниже команду в выбранный вами терминал.

npm init -y

Далее мы установим наши зависимости.

npm i [email protected] [email protected] -S

Обратите внимание на исправленные версии (это делается исключительно для улучшения совместимости с этим руководством в будущем).

Мы также добавим команду к нашему package.json, чтобы немного упростить задачу. Перетащите ниже в раздел сценария.

"start": "cypress open"

Теперь мы можем запустить Cypress с помощью npm start.

npm start

Прежде чем писать какие-либо тесты, мы обновим автоматически сгенерированный cypress.json, включив в него baseUrl. Замените содержимое cypress.json приведенным ниже блоком кода (при необходимости отрегулируйте baseUrl).

// cypress.json 
{   
  "baseUrl": "http://localhost:1313/" 
}

Мы собираемся перейти во вновь созданную папку Cypress в нашей рабочей области и создать файл в папке интеграции с именем demo.spec.ts.

Мы можем заполнить этот файл нашим первым тестом. Это будет обычный тест Cypress, который проверяет заголовок поста в блоге.

// demo.spec.js 
describe("Demo Testing", () => {   
  it("can open a blog page", () => {     
    cy.visit("/"); 
     
    cy.get(".post-entry:first").click();         
    cy.get(".post-title")       
      .should("be.visible")       
      .contains("Web scraping to create an api in 3 minutes!");
    }); 
});

Теперь мы выберем файл demo.spec.ts из селектора файлов Cypress, который появился после запуска нашей команды npm start. Проверьте ниже, чтобы увидеть выполнение теста.

Большой! У нас проходной тест! Давайте посмотрим, что произойдет, если мы установим .post-title равным:

.post-title {   
  transform: scale(0.1);   
  opacity: 0.1; 
}

Теперь проверьте ниже, чтобы снова увидеть тот же тест.

Несмотря на то, что заголовок кажется невидимым, тест все равно проходит. Это не идеально.

Визуальный тест 👁️

Настроим плагин.

Перейдите к cypress/integration/plugins/index.js и замените содержимое следующим.

const { initPlugin } = require("cypress-plugin-snapshots/plugin");  
module.exports = (on, config) => {   
  initPlugin(on, config);   
  return config; 
};

Добавьте следующий импорт в cypress/integration/support/index.js.

import "cypress-plugin-snapshots/commands";

На данный момент мы отменим сделанные CSS изменения.

Давайте добавим второй тест к нашему demo.spec.js.

it("visually check a post", () => {   
  cy.visit("/");    
  cy.get(".post-entry:first").click(); 
   
  cy.get(".post-title")
    .toMatchImageSnapshot({ imageConfig: { threshold: 0 } }); 
});

После выполнения этого теста он будет пройден, и изображение будет сохранено в рабочей области. Проверьте это ниже.

Это изображение теперь будет нашим базовым изображением, которое будет использоваться для сравнения будущих тестовых прогонов. Давайте снова представим наш плохой CSS и повторно запустим тесты.

Теперь у нас есть неудачный тест, и мы также можем взглянуть на ожидаемые и фактические результаты изображения. Также доступно сравнение изображений, поэтому вы можете увидеть наложение обоих изображений с выделенными областями, в которых лежат потенциальные различия.

Успех! 👍

Заключение

Визуальное тестирование можно использовать для тестирования всей страницы, отдельных элементов, покомпонентно и так далее. Как и любой инструмент, который используют разработчики, использование будет зависеть от ваших собственных вариантов использования. Большие скриншоты со временем могут стать хрупкими, поэтому внимательно продумайте свои тесты (и пороговые значения).

Не забудьте проверить все доступные плагины визуального тестирования Cypress, чтобы узнать больше!

Оставайтесь на связи, связавшись со мной в Твиттере.

Загляните также в мой блог philscode.com

Исходный код: Гитхаб