Transcription
Всем привет! Добро пожаловать на второй курс по Playwright. И сегодня в этом уроке я вам покажу, как написать свои первые тесты, как их запустить, как проверить, что у нас текущий результат совпадает с тем, что мы ожидаем, или не совпадает, что тогда нам скажет в этом случае Playwright. И бонусом я покажу, как запустить ваши тесты сразу в нескольких браузеров, то есть сделать кроссбраузерное тестирование. Поехали!
Мы с вами будем делать сегодня некий пример, который можно тоже посмотреть в секции "Write and tests". Да, здесь написано, как написать свой первый тест-кейс, и сделаем нечто подобное на сайте, который я вам предложу. Единственное, что я вижу, что какие-то есть сложные способы проверки ожидаемого результата, вот в частности с использованием регулярных выражений. Я сделаю немножко попроще, причём покажу вам ещё и два способа. И тестировать мы будем на этот раз не мой динг, а выберем сайт, у которого побольше элементов, на которые можно нажимать, побольше функционала. И сделаем сегодня несколько простых тестов на сайте Lites. Просто для демонстрации проверим заголовки пары страниц. Поехали!
Возвращаемся в PyCharm. Да, кстати, то, что я забыл сделать на первом уроке, и сейчас я уже вам не покажу, но очень это просто. Всем советую делать это: добавить учебный проект в Git. Сейчас вы можете просто установить Git, если он у вас не установлен, создать репозиторий, дальше сделать первый коммит. И потом, когда вы уже освоите Playwright, у вас будет какой-то набор тестов, который не страшно будет показать будущему работодателю. Выкладывайте это всё на какой-нибудь GitHub, это сильно выделит вас на собеседовании по сравнению с другими кандидатами. Поверьте, мало кто делает, а конкуренция сейчас на рынке сами знаете какая большая. Поэтому старайтесь использовать эту возможность. Ничего от вас особо сложного не требуется. Если у вас есть сложность, вы не знаете, как работает Git, на моём канале было видео про Git, я ссылочку в описание к этому видео добавлю.
Так что мы с вами сегодня будем делать? Мы будем использовать Playwright. Да, давайте ещё раз заглянем в документацию. Вот здесь также есть написано, что нужно использовать, важно использовать префикс `test_` во всех файлах или в самих тестах. И мы с вами будем делать то же самое. Более того, давайте мы заведём отдельную папку `tests`. Сделаем New Directory, назовём её `tests`. И в этой папке создадим первый наш тестовый файл Python File и назовём его как-нибудь `test_titles`. Всё, у нас файл готов. И этим файлом мы теперь начнём использовать инструменты Playwright. Также, как и в прошлый раз, мы делаем `from playwright.sync_api import sync_playwright`. И нам потребуется, будем работать с элементами. Каждый тест он определяется отдельной командой. Дальше у нас нужно указать имя теста, которое начинается со слова `test_`. И давайте мы [музыка] протестируем, проверять, то есть мы зайдём на сайт Lites, откроем вот эту вот домашнюю страницу и проверим, что у нас вот здесь вот в этой вкладке именно вот этот текст отображается. Вот это вот мы напишем в нашем тесте.
Возвращаемся. Значит, дальше мы уже используем нашу известную конструкцию `with sync_playwright() as p:`. И `page = p.chromium.launch()`. Да, чтобы подгрузить все необходимые инструменты, методы для работы со страницей. И начинаем уже многим знакомое `page.goto()`. Выбираем наш URL, который мы хотим открыть. Просто я его скопирую с браузера, и всё. Дальше мы открываем эту страницу. И давайте я вам покажу самый, наверное, простой способ, как сверить то, что есть на этой странице, с помощью команды `assert`. Дальше через `page` мы можем сразу вытащить `title` этой страницы. И через оператор `==` мы можем как раз показать, какой `title` мы ожидаем в этом условии. А так, ну можно это писать вручную. Давайте я всё-таки открою HTML и посмотрю `title` его, скопирую. Сейчас одну секундочку, это займёт какое-то время. Вот он `title`. И вот этот текст я его копирую, вставляю. Да, вот у нас текст сработал. И всё, на этом тест в принципе закончен. Да, можно его запустить.
Так, давайте подскажу ещё, как запускаются тесты. Да, если мы используем `pytest`, то в командной строке мы вводим команду `pytest`. И у нас запускается наш тест. Вот мы видим, что у нас уже есть результат. Всё отработало, результат `passed`. Но мы с вами ничего не увидели, да, как при первом прогоне на первом уроке. А чтобы у нас заработала браузер и он показал нам, что происходит, то нам нужно вбить команду `pytest --headed`. И теперь у нас, если мы это запустим, запускается браузер, открывается трейсер. Всё очень быстро это работает. Снова результат `passed`. Давайте я очищу командную строку, чтобы вам было удобнее. Что мы сейчас проверим? На всякий случай, давайте проверим, что он действительно сравнивает строку вот эту вот с заголовком страницы точь-в-точь, как она должна быть. Поставим вот сюда восклицательный знак, которого нет на самом деле на странице. И сейчас я просто проверю, что у меня действительно изменения. `pytest --headed` запускается браузер. И как мы видим, всё у нас здесь красненькое. И да, вот говорит, что у нас `assert`, который мы написали, вот это вот условие, оно не совпадает. Да, у нас ожидается восклицательный знак, на самом деле восклицательного знака нету. Отлично, всё работает. Убираю восклицательный знак, чтобы ошибку в тесте уже исправить. Делаю `clear`.
И давайте теперь напишем второй тест, который будет ближе к тому, что у нас есть здесь в документации. Мы используем во втором тесте вот эту вот конструкцию `expect`. А, и давайте сделаем это на другой странице, например, на странице аудиокниги. А, можно делать всё то же самое. Давайте начнём. `def test_audiobooks_page_title(page):`. И что здесь можно сделать? Можно также сделать `page.goto()` и просто открыть необходимую нам страницу. Но не будем мы так делать. Мы сделаем немножко более хитро. Мы начнём с главной страницы сайта Lites. А затем мы попробуем нажать, как вот я сделал это в самом браузере, нажать на вот этот элемент меню и открыть уже страницу `Lit audiobooks`. Для этого у нас тоже есть элемент, а [музыка] `get_by_role`. Да, откуда я это беру? Давайте я вам сейчас тоже документацию покажу. Есть, во-первых, здесь в примере тоже `get_by_role`. Вот я как раз именно эту конструкцию и хочу использовать. Но вообще, как, как мы можем находить элементы? Здесь с элементами через `role`, через `text`, через `ID`. Но мы попробуем сейчас через `role` наш элемент меню найти и к нему обратиться. Так, `role`, значит, если мне память не изменяет, здесь нужно указать `link`, `link`, запятая `name` равняется, и там, по-моему, у нас так и называется "Аудиокниги". И окей, мы этот элемент найдём. Что нам с ним нужно сделать? Нам нужно на него ещё и нажать. Соответственно, сделаем `click()`. Вот так у нас должно это всё отработать. И после этого можем повторить проверку и сравнить `title` страницы, которая откроется, с тем, что мы сейчас здесь пропишем. И давайте это вот это самое. Дальше там `expect(page).to_have_title()`. То есть мы уже проверяем этот, что там находится. Дальше есть метод `title`. И в двойных кавычках мы можем ещё раз указать вот это вот, который нас интересует. Вот сразу копирую здесь в Chrome Tools, вставляю. И по идее, всё, если я ничего нигде не ошибся, то должно отработать.
Заходим обратно в командную строку, делаем `pytest --headed`. Запускаем. И видим какую-то ошибку. Видим какую-то ошибку. Сейчас посмотрю, что у нас случилось. А, он говорит, что не может определиться всё-таки с этим локатором. Говорит, что найдено два элемента ссылкой "Аудиокниги". Скорее всего, у нас на сайте где-то есть ещё одна ссылка с аудиокнигами. Наверное, она где-нибудь в футере. Да, вот, вот она. Соответственно, по `get_by_role` нашёл, что у нас две ссылки с аудиокнигами и не может определиться, на какую из них нажать. Окей, давайте тогда сделаем по-другому. Тогда вот этот момент мы сейчас уберём. И у Playwright есть стандартная возможность работать с локаторами, используя XPath или CSS. Просто если мы сделаем `page.locator()` и вот здесь вот можно ввести `xpath=`. Так, сейчас там, по-моему, это всё в кавычках надо указывать. Да, равно. И давайте мы [музыка] тогда найдём XPath этого вот элемента. Вот он здесь. Сейчас этот скопирую. Урок про локаторы, про XPath, ну не самая чистая работа, не очень хорошо так делать, но ладно, пока пойдёт. Да, опять же, видите, у нас тут немножко подсвечивается некрасиво. И у меня здесь с двух сторон двойные кавычки, плюс внутри XPath двойные кавычки. Как-то надо от этого уйти. Можно поставить одинарные кавычки в середине, можно переписать XPath таким образом, чтобы он всё-таки нашёл этот элемент. Но я сейчас сделаю более быстрое решение. Это поставлю обратный слеш и экранирую эти вот кавычки. Таким образом, я надеюсь, что теперь он элемент меню найдёт, нажмёт, и всё отработает.
Так, давайте возвращаю нам чистый, чистый терминал. Запускаем `pytest --headed`. И на этот раз у нас всё отработало. Как видите, два теста `passed` за 5 с половиной секунд. Проверим такой же случай с восклицательным знаком, что у нас действительно реагирует. И сейчас второй тест упадёт. Ещё раз запускаю. Так, задумалась. И да, задумалась хорошо. В этот раз у нас второй тест упал, как раз на `title` аудиокниги. То есть всё работает, и `expect`, и `assert`. И вот, пожалуйста, первые два теста у нас готовы. Можно сделать Git commit.
А что я вам ещё сегодня хотел показать бонусом? Да, как я говорил, что можно сразу запускать тесты в нескольких браузерах. Да, и как это сделать? Также через команду `pytest` можно передать ей ещё параметр `browser` и через пробел указать, какой браузер нас интересует. Если мы хотим потестить в Chrome, то надо попросить Playwright потестить в Chrome. И если мы хотим ещё раз потестить, например, в том же Firefox, то тоже укажите здесь это через ту же команду `firefox`. Вот сейчас я запущу эти же два теста. Первый раз они выполнятся в браузере Chrome. Затем запустится Firefox, и выполнится ещё те же два теста. И суммарно у меня получится четыре теста, по крайней мере, я так ожидаю. Давайте посмотрим, как это работает. Так, Chrome отработал. Firefox вот немножко, видите, отличается. И всё у нас, да, работает. Четыре теста, 10 с небольшим секунд. Всё работает. Очень удобно, когда нам нужно сделать какую-то рутинную работу, например, проверить заголовки десятков страниц в разных браузерах. Или бывает, что высвечивается какой-то баннер, который нам надо найти и проверить его на разных страницах в разных браузерах, что он действительно там отображён в нужном месте и никуда не уехал. И вот прямо отличное решение для таких задач. Надеюсь, вам это пригодится. В принципе, всё, что я вам хотел сегодня рассказать. Не забываем делать Git commit, сохраняем первые тесты. Спасибо вам, что досмотрели видео до конца. Надеюсь, оно было полезно, и до встречи в следующих уроках.