Все в масштабе становится немного сложнее, медленно, но верно, многие строительные блоки внутренних сервисов были системой дизайна DWP, которая включает структурные компоненты (заголовок, ключевые детали, нижний колонтитул) и более функциональные, такие как временная шкала. .
До этого во многих случаях у нас были люди, которые делали компоненты, или вставляли из разных прототипов другие сервисы и модифицировали шапку GOV.UK.
В одном подключенном сервисе мы получили 5 вариантов заголовка, в основном связанных с размером шрифта и выравниванием.
Задача решена?
Ну, частично. Иметь единую точку истины очень полезно, но кое-что все же произошло.
- Локальные изменения
- Ошибки в дизайн-системе
- Изменения в том, что отображается
Некоторые из них были пойманы, и некоторые из них были запущены в производство.
Визуальная регрессия позволяет нам протестировать компонент, использовать отрендеренную версию компонента (с данными) и с помощью драматург сравнить его.
Это легко сломать, но столь же дешево сделать, и в приведенном выше примере это устранило бы большинство непреднамеренных проблем.
Когда это упаковано, это становится артефактом дизайна, который мы можем проверить в нескольких сервисах.
// playwright.config.js
const config = {
reporter: 'list',
testDir: './tests/playwright',
snapshotPathTemplate: '{testDir}/example/{arg}.png',
};
module.exports = config;
Мы можем настроить драматурга несколькими способами, главное — указать, где находятся наши шаблоны, затем нам нужно написать наш фактический тестовый пример.
const { test, expect } = require('@playwright/test');
const BASE_URL = 'https://gov.uk/';
test.describe('visual tests', () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto(`${BASE_URL}/government/topical-events/coronation`);
await expect(page).toHaveTitle(/Coronation - GOV.UK/);
});
test('should have a valid header', async ({ page }) => {
await expect(await page.locator('header.gem-c-layout-super-navigation-header')
.screenshot())
.toMatchSnapshot('header-v1-desktop.png');
});
});
Этот код загрузит страницу и сравнит компонент с установленным снимком экрана, мы можем привести пример этого, чтобы охватить варианты компонентов, разные размеры страницы.
Мы также можем сопоставить это со снимками кода — это если использование разных фреймворков может быть полезным, поскольку оно утверждает, что html создается одним и тем же способом.
