Снятие скриншота по другому маршруту в угловом режиме с помощью транспортира

Question

Я новичок в тестировании с использованием транспортира, поэтому для тестирования мне нужно делать скриншоты в угловом приложении для всех различных маршрутов в моем приложении. Я попытался сделать это на небольшом фиктивном угловом приложении, поэтому я клонировал репо Tour of heroes, в котором есть панель инструментов и маршрут Heroes. Я написал следующий код в app.po.ts:

import { browser, element, by } from 'protractor';

export class BlankPage {
  navigateTo() {
    return browser.get('/heroes');
  }

  getParagraphText() {
    return element(by.tagName('h2')).getText();
  }
}

и в app.e2e-spec.ts

import { BlankPage } from './app.po';
import {browser,by,element} from 'protractor';
import { protractor } from 'protractor';
import {createWriteStream} from 'fs' ;

describe('blank App', () => {
  let page: BlankPage;

  beforeEach(() => {
    page = new BlankPage();
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('My Heroes');
    browser.takeScreenshot().then((png) =>{
      var stream = createWriteStream("heroes.png"); /** change the png file name  */
      stream.write(new Buffer(png, 'base64'));
      stream.end; 
  });
});
});

Идея состояла в том, чтобы перейти к маршруту героев и сделать скриншот. Я получил скриншот, но
Есть ли способ, которым я могу автоматизировать задачу перехода на все маршруты и делать скриншоты? На моем реальном сайте есть много маршрутов

Answer 1

Я думаю, что лучшим подходом для вас было бы иметь список всех маршрутов в вашем приложении и создать тест на основе данных, чтобы выполнить итерацию по каждому из них.

Вам потребуется общая навигационная функция, которая может попасть на каждую страницу, например navigateTo (routeName). Этот код будет выглядеть примерно так:

var routes = [
    'homepage',
    'myheroes',
    'mainpage',
    'heroprofile'
]

describe('blank App', () => {
    for (let i = 0; i < routes.length; i++) {
        it('should display message saying app works', () => {
            navigateTo(routes[i]);
            browser.takeScreenshot().then((png) => {
                var stream = createWriteStream(routes[i] + ".png"); /** change the png file name  */
                stream.write(new Buffer(png, 'base64'));
                stream.end;
            });
        });
    }
});

транспортир-изображения сравнения

Действительно, хотя я бы порекомендовал вам использовать пакет npm protractor-image-сравнение . Я работал с этим пакетом, и он делает визуальную проверку очень простой. Это позволяет вам сохранять новые базовые изображения (золотые изображения, как вы их называете), если они отсутствуют, и сравнивать их, если они присутствуют. Сравнение очень чувствительно к изменениям, но вы можете указать, какую разницу вы хотите разрешить.

При таком подходе база данных не требуется.

Примечание

Имейте в виду также, что разные браузеры делают скриншоты по-разному. Chrome считает «область просмотра» видимой частью браузера, но я уверен, что в Firefox вы можете сделать снимок всего веб-страницы сразу.

Answer 2

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

Посмотрите на некоторых репортеров:

allure-jasmine - Настоятельно рекомендуется.

protractor-jasmine2-screenshot-reporter

транспортир-jasmine2-html-reporter

protractor-html-reporter-2

protractor-html-screenshot-reporter

protractor-beautiful-reporter

Но если вы не хотите добавлять дополнительные библиотеки в свой проект, вы можете просто поместить функцию browser.takeScreenshot() в функцию afterEach, чтобы сделать скриншотпосле каждого теста (it).

Например:

describe('blank App', () => {
  let page: BlankPage;

  beforeEach(() => {
    page = new BlankPage();
  });
  afterEach(() => 
    browser.takeScreenshot().then((png) =>{
      var stream = createWriteStream("heroes.png"); /** change the png file name  */
    stream.write(new Buffer(png, 'base64'));
    stream.end; 
    });
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('My Heroes');

  });
});