Руководство по визуальному тестированию с Перси

Перейдите на вкладку Integrations . В разделе «Связать репозиторий» вы получите сообщение с требованием «установить интеграцию» для вашей организации. Нажмите на него, и вы попадете на страницу со списком интеграций Перси. Следуйте инструкциям на экране, чтобы настроить интеграцию с GitHub и предоставить доступ ко всем репозиториям, на которых вы хотите выполнить визуальное тестирование. После того, как вы завершили шаги установки, вам нужно связать проект Percy-Tutorial

Затем вернитесь к своему проекту Percy и перейдите на страницу Builds. Скопируйте PERCY_TOKEN Нам понадобится это для следующего шага.

3. Создание снимков Перси

Теперь, когда у нас есть проект Percy, готовый получать снимки, нам нужно сгенерировать и загрузить их в Percy для проверки. Мы будем использовать PercyScript для выполнения этой задачи. Перейдите в папку, в которой вы настроили демонстрационный проект. Откройте терминал и установите в него следующий пакет:

 npm install -D @percy/script

PercyScript использует Puppeteer , который является высокоуровневым API для управления браузером Chrome по протоколу DevTools. Короче говоря, Puppeteer позволяет нам взаимодействовать с веб-страницей так же, как люди, но используя код. Например, мы можем вводить текст и нажимать кнопки и ссылки. Обратите внимание, что браузер Chrome будет загружен в вашу папку node_modules

Затем создайте новый файл JavaScript в корне проекта, snapshots.js Этот скрипт создаст для нас три снимка, по одному для каждой страницы. Существует множество сценариев, по которым мы можем протестировать, но для простоты мы проверим только, чтобы убедиться, что каждая страница работает и правильно отображает результаты:

 const PercyScript = require('@percy/script');

PercyScript.run(async (page, percySnapshot) => {
    /**
    |---------------------------------------|
    | Generate Daily Rates Snaphsot         |
    |---------------------------------------|
    **/
    await page.goto('http://localhost:3000/');
    // wait for AJAX call to complete
    await page.waitForSelector('.loading', {
        hidden: true
    });
    // Take snapshot
    await percySnapshot('homepage');

    /**
    |---------------------------------------|
    | Generate Exchange Rate Snapshot       |
    |---------------------------------------|
    **/
    await page.goto('http://localhost:3000/exchange');
    // Wait for AJAX call to complete
    await page.waitForSelector('.loading', {
        hidden: true
    });
    await page.select('select#from', 'BTC'); // Select Bitcoin
    await page.select('select#to', 'USD'); // Select US Dollar
    await page.type('#amount', '1'); // Enter Amount
    await page.click('.submit'); // Hit the convert button
    // wait for AJAX call to complete
    await page.waitForSelector('.loading', {
        hidden: true
    });
    // Take snapshot
    await percySnapshot('exchange');

    /**
    |---------------------------------------|
    | Generate Historical Rates Snapshot    |
    |---------------------------------------|
    **/
    await page.goto('http://localhost:3000/historical');
    // wait for AJAX call to complete
    await page.waitForSelector('.loading', {
        hidden: true
    });
    // Set Calendar Date Input
    await page.evaluate(() => {
        document.getElementById('date').value = '2019-07-01';
    })
    // Click Fetch Rates Button
    await page.click('.submit');
    // wait for AJAX call to complete
    await page.waitForSelector('.loading', {
        hidden: true
    });
    // Take snapshot
    await percySnapshot('historical');
});

Чтобы понять сценарий, вам нужно просмотреть документацию API Puppeteer, чтобы найти ссылки на используемые функции. Вам также необходимо прочитать комментарии, которые я поместил, чтобы понять, что делает каждая строка.

Одна вещь, которую я хотел бы уточнить, это то, что я использую Semantic UI Loader в проекте приложения Currency, чтобы указать пользователю, что запрос AJAX обрабатывается в фоновом режиме. Когда запрос завершен, загрузчик скрыт от просмотра с помощью CSS. В коде Puppeteer нам нужно дождаться исчезновения загрузчика, прежде чем мы сможем сделать снимок.

Перед запуском скрипта нам нужно запустить отдельный терминал для запуска нашего приложения с помощью команды npm start В противном случае Перси не сможет найти и взаимодействовать с нашим веб-приложением.

Давайте запустим скрипт. Если вы работаете в Windows, я рекомендую вам использовать Git Bash или любой Linux-терминал для выполнения следующей команды. Если вы настаиваете на использовании PowerShell или любого терминала на базе Windows, вам нужно будет использовать правильный синтаксис для установки переменных среды:

 $ export PERCY_TOKEN=aaabbbcccdddeee # Replace this with your project token
$ npx percy exec -- node snapshots.js

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

Ссылка на результаты будет создана для вас. Нажмите Alt + нажмите на ссылку, чтобы открыть страницу сборки панели инструментов. Вы также можете найти результаты непосредственно в Percy на вкладке Builds . После того, как вы откроете страницу, вам, возможно, придется немного подождать, пока результаты отобразятся; Первая сборка занимает больше времени, так как Перси собирает и отображает активы в первый раз. Так как это первые загруженные снимки, нет базовых данных, с которыми можно сравнивать, чтобы обнаружить визуальные различия.

 const PercyScript = require('@percy/script');

const mockRates = {
  "success": true,
  "timestamp": 1563176645,
  "base": "EUR",
  "date": "2019-07-15",
  "rates": {
    "EUR": 1,
    "USD": 1.12805,
    "GBP": 0.897815,
    "AUD": 1.604031,
    "BTC": 0.00011,
    "KES": 116.200495,
    "JPY": 121.793281,
    "CNY": 7.75354
  }
};

const mockConvertRate = {
  "rate": 10244.442
}

PercyScript.run(async (page, percySnapshot) => {
  /**
  |---------------------------------------|
  | Mock Page Requests                    |
  |---------------------------------------|
  **/

  //Activate request interception
  await page.setRequestInterception(true);
  // Listen to each page request
  page.on('request', request => {
    // Mock Daily Rates API
    if (request.url().includes('/api/rates')) {
      request.respond({
        status: 200,
        contentType: "application/json; charset=utf-8",
        body: JSON.stringify(mockRates) // return mock rates data
      });
    }
    // Mock Convert/Exchange API
    else if (request.url().includes('/api/convert')) {
       request.respond({
         status: 200,
         contentType: "application/json; charset=utf-8",
         body: JSON.stringify(mockConvertRate) // return convert rate data
       });
    } else {
      request.continue();
    }
  });
}
//...

 git checkout -b feature-1

 git add .
git commit -m "Replaced Orange Color with Green"
git push -u origin feature-1

 git checkout master
git pull
npx percy exec -- node snapshots.js

 describe('CurrencySPA', () => {

    beforeEach(() => {
        cy.server();
        cy.route('GET', '/api/rates', 'fixture:rates.json'); // Mock Daily Rates Response

        cy.visit('localhost:3000');
    })

    it('Loads Daily Rates', () => {
        cy.get('#app > h1').should('have.text', 'Currency Rates'); // Confirm Page Header Title
        cy.get('.loading').should('not.be.visible');
        cy.get('tbody>tr').eq(0).should('contain', 'EUR');
        cy.get('tbody>tr').eq(1).should('contain', '1.12805');
        cy.percySnapshot();
    });

    it('Convert Currency', () => {
        cy.route('POST', '/api/convert', { // Mock Convert Currency Response
            "rate": 10244.442
        });
        cy.get('.menu > a:nth-child(3)').click(); // Click Exchange Rates Menu
        cy.get('#app > h1').should('have.text', 'Exchange Rate'); // Confirm Page Header Title
        cy.get('.loading').should('not.be.visible');
        cy.get('#from').select('BTC');
        cy.get('#to').select('USD');
        cy.get('#amount').type('1');
        cy.get('.submit').click();
        cy.get('#result').should('have.text', 'USD 10244.442');
        cy.percySnapshot();
    });

    it('Loads Historical Rates', () => {
        cy.get('.menu > a:nth-child(4)').click(); // Click Historicals Rates Menu
        cy.get('#app > h1').should('have.text', 'Historical Rates'); // Confirm Page Header Title
        cy.get('#date')
            .type('2019-07-02') // Will revert to 2019-07-01 (known bug)
            .blur();
        cy.get('.submit').click();
        cy.get('table').should('be.visible');
        cy.percySnapshot();
    });
});