Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>E2E Практики</h2>

2 <h2>Hexlet</h2>

3 <h2>Что вообще проверяем?</h2>

4 <ul><li>Соответствие макету<ul><li>поддержка retina-мониторов</li>

5 <li>pixel-perfect</li>

6 <li>контраст / следование style guides</li>

7 </ul></li>

8 <li>Проверка на разных разрешениях экрана<ul><li>десктопной</li>

9 <li>мобильной</li>

10 <li>адаптивных</li>

11 </ul></li>

12 <li>HTML / CSS / JS</li>

13 <li>Шрифты</li>

14 </ul><ul><li>Работа в разных окружениях<ul><li>кроссбраузерность</li>

15 <li>работа на разных устройствах</li>

16 <li>работа на разных операционных системах</li>

17 <li>корректная работа с разной скоростью интернета</li>

18 <li>корректная работа при включенном расширением AdBlock в браузере</li>

19 <li>анимация / прокрутка / sticky элементы / плавность</li>

20 </ul></li>

21 <li>Контент<ul><li>большой текст</li>

22 <li>орфографии</li>

23 <li>изображения</li>

24 </ul></li>

25 </ul><h2>Что мы делаем</h2>

26 <ul><li>определяем пользовательские сценарии<ul><li>логин</li>

27 <li>создание аккаунта</li>

28 <li>отправка сообщений</li>

29 <li>покупки</li>

30 </ul></li>

31 <li>автоматизируем сценарии</li>

32 <li>тестируем тесты</li>

33 <li>учитываем кроссбраузерность</li>

34 </ul><h2>Даже не пытаемся тестировать</h2>

35 <ul><li>CAPTCHA<ul><li>Отключаем капчу в тестовом окружении</li>

36 <li>Добавьте хук, позволяющий тестам обходить капчу</li>

37 </ul></li>

38 <li>Двухфакторная аутентификация<ul><li>Отключаем 2FA в тестовом окружении</li>

39 <li>Отключаем 2FA для определенных пользователей в тестовом окружении Вы можете использовать учетные данные этого пользователя при автоматизации</li>

40 <li>Отключите 2FA для входа в систему с определенных IP-адресов Мы можем установить эти IP-адреса для наших тестовых машин</li>

41 </ul></li>

42 </ul><h2>Даже не пытаемся тестировать</h2>

43 <ul><li>вход на сервисы вроде Gmail и Facebook, с помощью WebDriver это делать не стоит<ul><li>это против условий использования этих сайтов</li>

44 <li>вы рискуете потерять учетную запись</li>

45 <li>это медленно и ненадежно</li>

46 <li>используйте сервис, предоставляющий API для создания тестовых учетных записей</li>

47 <li>работа с API может усложнить работу, но это окупится скоростью, надежностью и стабильностью</li>

48 </ul></li>

49 <li>геттеры / сеттеры</li>

50 <li>нечто нерелевантное / внешнее / постороннее</li>

51 </ul><ul><li>Поддержка X браузеров на Y платформах - затратно</li>

52 <li>Ведет к ловушке поддержки X×Y реализаций</li>

53 <li>Делайте ваши тесты как можно более<a>устойчивыми</a>=== тесты не будут сразу ломаться при любом изменении</li>

54 </ul><ul><li>Ориентируйтесь на перспективу конечного пользователя</li>

55 <li>Мыслите как пользователь</li>

56 <li>Сосредоточьтесь на особенностях приложения, а не на его реализации<ul><li>Чего пытается достичь пользователь?</li>

57 <li>Легко ли найти то, что он(а) ищет?</li>

58 <li>Достигнет ли пользователь своей цели в несколько простых шагов?</li>

59 </ul></li>

60 </ul><ul><li>Избегайте нагромождений селекторов</li>

61 <li>Убедитесь, что у элемента есть стабильный селектор, который не изменится в следующей версии приложения</li>

62 <li>Выбирайте элементы страницы с умом<ul><li>ID</li>

63 <li>CSS селекторы</li>

64 <li>data-аттрибуты</li>

65 <li>Доступность (aria)</li>

66 </ul></li>

67 </ul><ul><li>Тесты не должны зависеть друг от друга</li>

68 <li>Не игнорируйте неустойчивые тесты, которые возвращают разные результаты без каких-либо изменений в коде</li>

69 <li>Прогоняйте тесты еще раз, прежде чем заводить issue</li>

70 <li>Убедитесь, что у вас есть подходящие тестовые данные</li>

71 </ul><ul><li>Напишите отчет</li>

72 <li>Проведите<a>дымовое тестирование</a></li>

73 <li>Разработайте наборы тестов на согласованность</li>

74 <li>Постройте хорошую организационную структуру</li>

75 <li>Нашли баг? Напишите тест, а затем исправьте его</li>

76 <li>Ждите, не спите</li>

77 </ul><ul><li>Тест должен быть простым</li>

78 <li>Используйте CI / уведомления</li>

79 <li>Используйте линтеры, следуйте стилям кодирования и т.д.</li>

80 <li>eslint-plugin-jest может предупреждать, когда в тесте нет утверждения (assertion)</li>

81 <li>Вы можете группировать тесты тегам вроде<em>#smoke</em></li>

82 <li>Антипаттерн: Вы читаете отчет => просматриваете код</li>

83 </ul><h2>Подмена бекенда</h2>

84 <h2>Mock Service Worker (msw)</h2>

85 <ul><li>Передовой мок-API</li>

86 <li>Перехватывает запросы на сетевом уровне, а не на уровне приложений</li>

87 <li>Вы можете использовать axios, fetch, xhr, что угодно</li>

88 </ul><ul><li>Вы можете использовать его для разработки и отладки</li>

89 <li>Поддержка REST API и GraphQL</li>

90 <li>Выполнение на стороне клиента</li>

91 <li>Поддержка TypeScript</li>

92 <li>Независимый от фреймворков</li>

93 </ul><h2>Исправление ответов сервера</h2>

94 <h2>Page Object Pattern</h2>

95 <ul><li>много тестов</li>

96 <li>много кода в тестах</li>

97 <li>сложно понимать структуру и флоу</li>

98 </ul><h2>Page objects</h2>

99 <ul><li>упрощение разработки</li>

100 <li>упрощение поддержки</li>

101 <li>Высокоуровневый API</li>

102 <li>DRY-принцип: создаем переиспользуемый код избегая повторов</li>

103 </ul><ul><li><p>page object - обертка над HTML страницей или ее частью</p>

104 </li>

105 <li><p>Ее API специфично для конкретного приложения</p>

106 </li>

107 <li><p>Манипулируйте элементами страницы, не углубляясь в HTML</p>

108 </li>

109 <li><p>findElementWithClass('album') => selectAlbumWithTitle()</p>

110 </li>

111 <li><p>findElementWithClass('rating').setText(5) => updateRating(5)</p>

112 </li>

113 </ul><h2>Преимущества</h2>

114 <ul><li>Если UI страницы изменится<ul><li>тесты изменять не надо</li>

115 <li>нужно изменить код в page object</li>

116 </ul></li>

117 <li>Все изменения касающиеся поддержки этого нового UI находятся в одном месте</li>

118 <li>Все доступные операции или сервисы на странице хранятся в одном месте вместо того, чтобы дублироваться во всех тестах</li>

119 <li>Код тестов легче понять</li>

120 <li>Существует четкое разделение между кодом тестов и кодом, относящимся к html-странице, вроде селекторов и верстки</li>

121 </ul><h2>Selenium</h2>

122 <h2>Правила</h2>

123 <ul><li>Сами page object никогда не должны ничего тестировать</li>

124 <li>Page object содержит представление страницы</li>

125 <li>Никакой код, связанный с тем, что тестируется, не должен находиться внутри объекта страницы</li>

126 <li>Исключение: убедитесь, что страница отображена верно</li>

127 </ul><ul><li><p>Доступные методы представляют операции, возможные на страницы</p>

128 </li>

129 <li><p>Try not to expose the internals of the page</p>

130 </li>

131 <li><p>Не создавайте объект для всей страницы, только значимые элементы</p>

132 <ul><li>верхний и нижний колонтитулы, список пользователей, логин и т.Д</li>

133 </ul></li>

134 <li><p>Общедоступные методы представляют услуги, предлагаемые на странице</p>

135 </li>

136 <li><p>Старайтесь не показывать внутренности страницы</p>

137 </li>

138 </ul><p>Если поведение должно отличаться</p>

139 <p>Можно наследоваться</p>

140 <h2>Минусы e2e</h2>

141 <ul><li>медленные</li>

142 <li>нестабильные</li>

143 <li>непредсказуемое поведение</li>

144 <li>изменение UI ломает тест</li>

145 <li>нельзя посмотреть строчку где тест упал</li>

146 </ul>