Разработка визуальных тестов

Содержание

1. Разработка визуальных тестов
2. Модульные тесты. Сравнение DOM
3. Визуальные тесты
4. Визуальные тесты
5. Отличие скриншотов
6. Скриншоты отдельных компонентов
7. Скриншот области
8. Selenium WebDriverВ рамках проекта Selenium разрабатываются драйверы
9. https://github.com/gemini-testing/hermione> npm install -g selenium-standalone> selenium-standalone install
10. Конфигурация Hermione//.hermione.config.jsmodule.exports = { sets: {
11. Тест Hermionedescribe('tasks', () =>it('should equal to etalon', function() {return this.browser.url('http://my-test-page.ru/').assertView('tasks', '.tasks').click('.expander').assertView('tasks-collapsed', '.tasks-collapsed');}));
12. Отчет
13. оставить получение данных самому приложению, чтобы во
14. Snapshot состояния redux-хранилища
15. Storybook
16. Storybook
17. Добавление story/*global storiesOf*/ import * as React
18. StoryProviderconst StoryProvider = (props: Props) => {const
19. Explorer в приложении
20. Explorer в контексте Storybook
21. Тест Hermione + Storybookdescribe('explorer', () =>it('should equal to etalon', function() {return this.browser.url('http://localhost:8089/iframe.html?selectedKind=visual-regression&selectedStory=contract-dev').assertView('contract', '.content-container').pause(100).assertView('navigation-bar', '.navigation-bar');}) );
22. Примеры тестируемых элементов
23. Примеры тестируемых элементов
24. Примеры тестируемых элементов
25. Запуск визуального теста> selenium-standalone start > Selenium started
26. Запуск визуального теста> selenium-standalone start > Selenium
27. Запуск визуального теста> selenium-standalone start > Selenium
28. Отчет
29. Отчет
30. Запуск тестов на виртуальном сервере> do vr-test-run
31. Включение тестов в Pull Request
32. Неудачный тест в Pull Request
33. Дополнительные настройки Hermione//.hermione.config.jsmodule.exports = { browsers: {
34. Спасибо за вниманиеБогданова Елена
35. Скачать презентанцию

Модульные тесты. Сравнение DOM

Главная
Разное
Разработка визуальных тестов

Слайды и текст этой презентации

Слайд 1Разработка визуальных тестов
Богданова Елена

Слайд 2Модульные тесты. Сравнение DOM

Слайд 3Визуальные тесты

Слайд 4Визуальные тесты

Слайд 5Отличие скриншотов

Слайд 6Скриншоты отдельных компонентов

Слайд 7Скриншот области

Слайд 8Selenium WebDriver
В рамках проекта Selenium разрабатываются драйверы для управления различными

браузерами
Gemini и Hermione
Selenium и Hermione
Gemini умеет делать снимки, в том

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

Mocha

Selenium

WebdriverIO

https://yandex.ru/dev/hermione/

Selenium WebDriverВ рамках проекта Selenium разрабатываются драйверы для управления различными браузерамиGemini и HermioneSelenium и HermioneGemini умеет делать

Слайд 9https://github.com/gemini-testing/hermione
> npm install -g selenium-standalone
> selenium-standalone install

> npm install

-g hermione
Установка Selenium и Hermione
Инфраструктура для тестов
https://github.com/vvo/selenium-standalone

https://github.com/gemini-testing/hermione> npm install -g selenium-standalone> selenium-standalone install > npm install -g hermioneУстановка Selenium и HermioneИнфраструктура для тестовhttps://github.com/vvo/selenium-standalone

Слайд 10Конфигурация Hermione
//.hermione.config.js

module.exports = {
sets: {
all: { files:

'./hermione/hermione-tests.js' }
},
browsers: {
'chrome-1920x1080': {

gridUrl: 'http://localhost:4444/wd/hub',
desiredCapabilities: {
browserName: 'chrome', //'internet explorer'
},
windowSize: '1920x1080',
screenshotsDir: './hermione/examples/chrome-1920x1080',
},
},
plugins: {
'html-reporter/hermione': {
enabled: true,
path: './report',
defaultView: 'all'
}
},
};

Слайд 11Тест Hermione
describe('tasks', () =>
it('should equal to etalon', function() {
return this.browser
.url('http://my-test-page.ru/')
.assertView('tasks',

'.tasks')
.click('.expander')
.assertView('tasks-collapsed', '.tasks-collapsed');
})
);

Тест Hermionedescribe('tasks', () =>it('should equal to etalon', function() {return this.browser.url('http://my-test-page.ru/').assertView('tasks', '.tasks').click('.expander').assertView('tasks-collapsed', '.tasks-collapsed');}));

Слайд 12Отчет

Слайд 13оставить получение данных самому приложению, чтобы во время выполнения теста

оно выполняло запросы к бэкенду, который, в свою очередь, получал

бы данные из какой-то эталонной базы данных;
подменить реальный бэкенд-сервер фейковым, который отдавал бы веб-приложению не данные из базы, а статические данные;
не вытаскивать данные с сервера, а перед выполнением теста восстанавливать состояние redux-хранилища, которое было в приложении на момент снятия эталонного снимка.

Тестовые данные

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

Слайд 14Snapshot состояния redux-хранилища

Слайд 15Storybook

Слайд 16Storybook

Слайд 17Добавление story
/global storiesOf/
import * as React from 'react';
import StoryProvider from

'./story-provider-dev';
storiesOf('visual-regression', module)
.add('contract-dev', () => {
const loadData =

import('./snapshots/contract.testdata');
return ;
});

Добавление story/*global storiesOf*/ import * as React from 'react';import StoryProvider from './story-provider-dev'; storiesOf('visual-regression', module) .add('contract-dev', () =>

Слайд 18StoryProvider
const StoryProvider = (props: Props) => {
const [ snapshotState, setSnapshotState

] = React.useState(null);
const loadSnapshot = async() => {
const snapshot

= (await props.loadSnapshot).default;
setSnapshotState(snapshot);
};
React.useEffect(() => { loadSnapshot(); }, []);
if (!snapshotState)
return

Loading snapshot...

;
const store = createMockStoreBySnapshotState(snapshotState);
return (

);
};

StoryProviderconst StoryProvider = (props: Props) => {const [ snapshotState, setSnapshotState ] = React.useState(null); const loadSnapshot = async()

Слайд 19Explorer в приложении

Слайд 20Explorer в контексте Storybook

Слайд 21Тест Hermione + Storybook

describe('explorer', () =>
it('should equal to etalon', function()

{
return this.browser
.url('http://localhost:8089/iframe.html?selectedKind=visual-regression&selectedStory=contract-dev')
.assertView('contract', '.content-container').pause(100)
.assertView('navigation-bar', '.navigation-bar');
})
);

Тест Hermione + Storybookdescribe('explorer', () =>it('should equal to etalon', function() {return this.browser.url('http://localhost:8089/iframe.html?selectedKind=visual-regression&selectedStory=contract-dev').assertView('contract', '.content-container').pause(100).assertView('navigation-bar', '.navigation-bar');}) );

Слайд 22Примеры тестируемых элементов

Слайд 23Примеры тестируемых элементов

Слайд 24Примеры тестируемых элементов

Слайд 25Запуск визуального теста
> selenium-standalone start
> Selenium started

Слайд 26Запуск визуального теста
> selenium-standalone start
> Selenium started
> npm run

build-storybook
> cross-env NODE_ENV=vr-test node ./.storybook/build-storybook -s ./storybook-static-resources -o ./storybook-static
> http-server

storybook-static –p 8089
Starting up http-server, serving storybook-static
Available on:
http://192.168.122.12:8089
http://192.168.56.1:8089
http://127.0.0.1:8089
Hit CTRL-C to stop the server

Запуск визуального теста> selenium-standalone start > Selenium started> npm run build-storybook> cross-env NODE_ENV=vr-test node ./.storybook/build-storybook -s ./storybook-static-resources

Слайд 27Запуск визуального теста
> selenium-standalone start
> Selenium started
> hermione

✓ explorer should equal to etalon [chrome-1920x1080:54b50c542c4158402fecfdabd6dc2c46] - 6628ms
✓ explorer

should equal to etalon [ie-1920x1080:455bdee9-a25d-4eda-a496-2c23771bccb7] - 9012ms
Total: 2 Passed: 2 Failed: 0 Skipped: 0 Retries: 0
Your HTML report is here: file://D:\Projects\Sungero\Web\src\SungeroClient.Web\report\index.html

> npm run build-storybook
> cross-env NODE_ENV=vr-test node ./.storybook/build-storybook -s ./storybook-static-resources -o ./storybook-static

> http-server storybook-static –p 8089
Starting up http-server, serving storybook-static
Available on:
http://192.168.122.12:8089
http://192.168.56.1:8089
http://127.0.0.1:8089
Hit CTRL-C to stop the server

Запуск визуального теста> selenium-standalone start > Selenium started> hermione ✓ explorer should equal to etalon [chrome-1920x1080:54b50c542c4158402fecfdabd6dc2c46]

Слайд 28Отчет

Слайд 29Отчет

Слайд 30Запуск тестов на виртуальном сервере
> do vr-test-run [vr-test-update]
…
> build-storybook
…
> ./storybook-static

copy to //virtual/storybook-static
> ./hermione copy to //virtual/hermione
> ./prepare-vr-test.js

copy to //virtual/prepare-vr-test.js
> ./cleanup-vr-test.js copy to //virtual/cleanup-vr-test.js

> node prepare-vr-test.js
> cmd /c http-server storybook-static
> cmd /c hermione [--update-refs]
> …
> report copy to //pc/test-result
> node cleanup-vr-test.js
> Storybook server stopped
> Removing temp folder

Virtual server (temp folder)

Запуск тестов на виртуальном сервере> do vr-test-run [vr-test-update]…> build-storybook…> ./storybook-static copy to //virtual/storybook-static> ./hermione copy to //virtual/hermione

Слайд 31Включение тестов в Pull Request

Слайд 32Неудачный тест в Pull Request

Слайд 33Дополнительные настройки Hermione
//.hermione.config.js

module.exports = {
browsers: {
'chrome-1920x1080': {

gridUrl: 'http://localhost:4444/wd/hub',
retry: 2,
screenshotDelay: 300,
resetCursor : true
…
}

}
};

Дополнительные настройки Hermione//.hermione.config.jsmodule.exports = { browsers: { 'chrome-1920x1080': { gridUrl: 'http://localhost:4444/wd/hub',retry: 2,screenshotDelay: 300,resetCursor :

Слайд 34Спасибо за внимание
Богданова Елена

Скачать презентацию

Разделы презентаций

Разработка визуальных тестов

Содержание

Слайды и текст этой презентации

Слайд 1Разработка визуальных тестовБогданова Елена

Слайд 2Модульные тесты. Сравнение DOM

Слайд 3Визуальные тесты

Слайд 4Визуальные тесты

Слайд 5Отличие скриншотов

Слайд 6Скриншоты отдельных компонентов

Слайд 7Скриншот области

Слайд 8Selenium WebDriverВ рамках проекта Selenium разрабатываются драйверы для управления различными

браузерамиGemini и HermioneSelenium и HermioneGemini умеет делать снимки, в том

Слайд 9https://github.com/gemini-testing/hermione> npm install -g selenium-standalone> selenium-standalone install > npm install

-g hermioneУстановка Selenium и HermioneИнфраструктура для тестовhttps://github.com/vvo/selenium-standalone

Слайд 10Конфигурация Hermione//.hermione.config.jsmodule.exports = { sets: { all: { files:

'./hermione/hermione-tests.js' } }, browsers: { 'chrome-1920x1080': {

Слайд 11Тест Hermionedescribe('tasks', () =>it('should equal to etalon', function() {return this.browser.url('http://my-test-page.ru/').assertView('tasks',

'.tasks').click('.expander').assertView('tasks-collapsed', '.tasks-collapsed');}));

Слайд 12Отчет

Слайд 13оставить получение данных самому приложению, чтобы во время выполнения теста

оно выполняло запросы к бэкенду, который, в свою очередь, получал

Слайд 14Snapshot состояния redux-хранилища

Слайд 15Storybook

Слайд 16Storybook

Слайд 17Добавление story/*global storiesOf*/ import * as React from 'react';import StoryProvider from

'./story-provider-dev'; storiesOf('visual-regression', module) .add('contract-dev', () => { const loadData =

Слайд 18StoryProviderconst StoryProvider = (props: Props) => {const [ snapshotState, setSnapshotState

] = React.useState(null); const loadSnapshot = async() => { const snapshot

Слайд 19Explorer в приложении

Слайд 20Explorer в контексте Storybook

Слайд 21Тест Hermione + Storybookdescribe('explorer', () =>it('should equal to etalon', function()

{return this.browser.url('http://localhost:8089/iframe.html?selectedKind=visual-regression&selectedStory=contract-dev').assertView('contract', '.content-container').pause(100).assertView('navigation-bar', '.navigation-bar');}) );