test(e2e): Переносим тесты на доступность в playwright #5276
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit b3a99b7:
|
size-limit report 📦
|
👀 Docs deployedCommit 433d088 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #5276 +/- ##
==========================================
- Coverage 81.26% 79.58% -1.68%
==========================================
Files 326 312 -14
Lines 10108 9960 -148
Branches 3397 3330 -67
==========================================
- Hits 8214 7927 -287
- Misses 1894 2033 +139
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
e2e tests |
| await testInfo.attach('Accessibility Violations', { | ||
| body: JSON.stringify(results.violations, null, 2), | ||
| contentType: 'application/json', | ||
| }); |
There was a problem hiding this comment.
Сейчас вот такой репорт в случае когда тест не проходит
Скриншот
export const Accordion = ({ getRootRef, className, ...restProps }: AccordionProps) => (
<details
aria-hidden2 // вот тут должен ругаться
className={classNames(styles['Accordion'], className)}
ref={getRootRef}
{...restProps}
/>
);
Не смотрела https://github.com/lpelypenko/axe-html-reporter ? Вот тут чел пишет, что интегрировал с @axe-core/playwright. Вот такое выдаёт https://lpelypenko.github.io/axe-html-reporter/. Надо будет его к общему HTML репорту атачить.
There was a problem hiding this comment.
Подтащила свеженький репорт, но артефакты в playwright-репорт тоже креплю на всякий случай.
There was a problem hiding this comment.
@inomdzhon FYI вот тут коммент с собравшимся репортом-прям-репортом: #5369 (comment)
| contentType: 'application/json', | ||
| }); | ||
|
|
||
| expect(results.violations).toEqual([]); |
There was a problem hiding this comment.
Продолжая тему про репорт, сейчас тесты должны падать при проблемах доступности? Или это должно оставаться как warning, пока не исправим всё?
There was a problem hiding this comment.
Это хороший вопрос, я пока думаю, как бы покрасивее показывать, сколько у нас в целом проблем доступности сейчас.
Вообще идея в том, чтобы влить в мастер число наших текущих violations и сравнивать его с числом в ветке; если в ветке violations по a11y больше, чем в мастере — валим тест.
There was a problem hiding this comment.
@inomdzhon в описание добавила:
- дальше на CI джоба Pull Request / Packages:
- грузит HTML-репорт в S3
- сравнивает
BASEиHEADи количество ошибок a11y в них- добавляет коммент со ссылкой на репорт, количеством ошибок и статусом (доступность улучшилась/ухудшилась/осталась прежней)
- падает, если доступность ухудшилась
Ну и вот тут можно посмотреть, как визуально выглядит прошедший тест: #5369 (comment)
Как тебе такое решение? 😉
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
2 times, most recently
from
e23c6a8
to
307eed3
Compare
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
3 times, most recently
from
7649dad
to
485cecc
Compare
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
16 times, most recently
from
5029846
to
2232256
Compare
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
2 times, most recently
from
053ffcf
to
3eb1cf6
Compare
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
2 times, most recently
from
e5368ea
to
433d088
Compare
github-actions
bot
added
the
pr-needs-work
|
PR закрыт из-за отсутствия активности в течение последних 14 дней. Если это произошло по ошибке или изменения все ещё актуальны, откройте PR повторно. |
eugpoloz
added
no-stale
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
from
433d088
to
4f145b4
Compare
👀 Docs deployed
Commit b3a99b7 |
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
from
4f145b4
to
62ce4c4
Compare
- @axe-core/playwright - axe-html-reporter
`GenerateCustomScreenshotNameOptions` => `GenerateCustomNameOptions`
for every screenshot test involved
to generate cumulative axe report
with special thx to @inomdzhon for the bash script! ❤️
- move some functions to a11yReportUtils - update e2e helper types
eugpoloz
force-pushed
the
eugpoloz/a11y-tests-playwright
branch
from
62ce4c4
to
b3a99b7
Compare
Перенастроила сборку тестов на доступность.
@axe-core/playwrightпроверяет доступность на тех же примерах, что уходят в скриншоты,axe-html-reporter(спасибо @inomdzhon за подсказку!),BASEиHEADи количество ошибок a11y в нихГде посмотреть:
Нюансы:
axe-html-reporterПакет не обновлялся с 2021 года и особенно кастомизировать репорт не позволяет. Возможно, стоит написать свое красивенькое решение, основываясь на репортере playwright, и выложить его в open source. 😈
Коммент со ссылкой на репорт, количеством ошибок и статусом
Сейчас коммент собирается прямо внутри нашей Pull Request / Packages джобы. Но вообще хочу перенести как минимум его создание в gh-actions, чтобы уменьшить дубликацию кода.