Тестване на уеб приложения с Node.js и Playwright

Съвременното разработване на приложения зависи от автоматизирано тестване, като се използват тестови рамки, за да се гарантира, че кодът е готов за влизане в пакети за приложения и за крайни потребители. За да извлечете максимума от тестването, тестовете се пишат преди код и могат да бъдат интегрирани в тръбопроводи за контрол на източника и CI / CD (непрекъсната интеграция / непрекъснато внедряване). Тестовете трябва да са навсякъде в процеса на вашето развитие. Трябва да обедините заявка за изтегляне? Тествайте кода. Трябва да се ангажирате с клон? Тествайте кода.

Но има една област, в която тестването е трудно, особено когато трябва да се автоматизира. Говоря за необходимостта от взаимодействие и тестване на динамични потребителски интерфейси. Тестването на уеб приложения е сложен процес. Инструменти като Selenium и webdriver са ключови елементи за автоматизиране на съдържанието на страницата и за гарантиране, че тествате както елементите на страницата, така и приложението като цяло. Те са важни, ако използвате браузъри без глава в дадено приложение; Използвах набор от скриптове на Python в приложение за Twitter, изградено около поддръжката на уеб драйвер на Selenium и Chromium, за да автоматизирам правенето на екранни снимки от приложение за проследяване на самолети.

Представяме Ви Playwright, рамката за уеб тестване на Microsoft

Селенът и webdriver не са единствените инструменти за изграждане на цялостни тестове за съвременни уеб приложения и браузъри. Популярна алтернатива е Puppeteer на Google, който се справя както с изпращането на кликвания до браузърите, използвайки същите техники като инструментите за уеб драйвери на Chrome, така и с достъп до информация за отстраняване на грешки чрез приложните програмни интерфейси (API) на познатите програми за разработчици. По-нов участник в лигата за тестване на браузъри, Playwright се разработва от Microsoft като проект с отворен код, хостван на GitHub.

Playwright приема основната Puppeteer архитектура и я премества по-скоро в посока на Selenium, добавяйки рамка за уеб автоматизация и подобрявайки как Puppeteer взаимодейства със съдържанието на страницата. Той е проектиран да инсталира бързо и лесно, използвайки познатия npm синтаксис, използвайки JavaScript за изграждане на автоматизация и тестване на уеб приложения. Работи с повече браузъри, с поддръжка за браузъри, базирани на Chromium, като Edge, както и Firefox и Apple WebKit.

В списъка на поддържаните браузъри на Playwright има важно съобщение: Не можете да го използвате с браузъри, базирани на Trident или EdgeHTML. Не е изненадващо. Microsoft пое твърд ангажимент към своя клон Chromium в новия си Edge и старите Edge и Internet Explorer са близо до края на живота си. Ако ще използвате Playwright за тестване, вземате решение да поддържате само модерни модерни браузъри, така че ще трябва да информирате потребителите какво предстои за бъдещи версии на всички уеб приложения, които създавате и поддържате.

Тестване на мрежата с драматург

Възможността за крос-платформен тест на всички основни браузъри със същия набор от скриптове е важна, както и поддръжката за мобилни версии на сайтове (тъй като двете основни мобилни платформи използват варианти на своите браузъри за настолни компютри. Понастоящем драматургът емулира мобилни изгледи в настолни браузъри ). Също така е важна поддръжката за безглавни тестове, където не изобразявате потребителски интерфейс на браузъра, а вместо това работите с генерирания обектен модел на документ (и DOM в сянка, ако използвате модерна функционалност на браузъра и технологии като уеб компоненти).

Можете да използвате Playwright за автоматизиране на работещ браузър на десктопите за разработка, за да инспектирате грешки като част от отстраняване на грешки в приложенията, като гарантирате, че непрекъснато преминавате през всичките си тестови пътища, докато записвате допълнителна информация за производителността и следите за непроследени грешки в потребителския интерфейс. Като алтернатива, той може да бъде настроен като част от действие на GitHub за тестване на нов код като част от фиксиране или обединяване, като автоматизира това, което иначе би могло да бъде сложен ръчен тест.

Изграждане и провеждане на тестове за драматург

Първите стъпки с Playwright са толкова лесни, колкото настройването на нов проект Node.js. Първо, инсталирайте Node.js на вашите тестови устройства. Тъй като Playwright използва Node, можете да го стартирате на компютри за разработка или на сървъри във вашия CI / CD конвейер, което го прави част от действие на GitHub, което може да се използва по време на процеса на разработване на вашия софтуер. Всичко, от което се нуждаете, е една команда npm, която инсталира пакета Playwright, както и двоичните файлове за всички поддържани браузъри. След завършване на инсталирането можете да създавате скриптове за автоматизация с помощта на JavaScript или TypeScript за извикване на API на Playwright. Всичко това са асинхронни повиквания, така че използвайте извлеченията await, за да управлявате обещанията си.

Резултатът е много ясен начин за изграждане на скриптове, като се започне с отваряне на екземпляр на браузъра без глава, след което се навигира до страница, преди да се взаимодейства с инстанции на страницата. Добре е първоначално да създавате тестове с пълни браузъри, за да можете да проследите как Playwright взаимодейства с вашето приложение. Полезна бавна опция изпълнява взаимодействията с по-човешка скорост, което улеснява визуализирането и управлението на тестове, работещи в браузъри за настолни компютри. След като тестът бъде отстранен и работи добре, можете да го преместите в режим без глава и след това да го стартирате като част от изпълнението на CI / CD.

Playwright включва CLI инструмент, който може да записва взаимодействия със сайтове, като автоматично генерира JavaScript, необходим за провеждане на тестове. Опцията codegen е полезен инструмент за бързо започване на работа с Playwright, показвайки ви кода, който взаимодейства с елементите на страницата, които след това можете да използвате като шаблон за вашите собствени тестове, копиране и редактиране на генериран код, ако е необходимо. Поддръжката на TypeScript може да помогне да се напишат по-сложни тестове, като се използва силно писане за управление на променливи.

Работа с уеб приложения в Playwright

Една от по-полезните функции на Драматург е неговата поддръжка за контекста на браузъра. Те ви позволяват да изпълнявате изолирани действия в един екземпляр на браузъра, така че можете да настроите няколко контекста, за да тествате няколко взаимодействия едновременно. Във всеки контекст създавате страници, които най-добре се разглеждат като раздели в браузъра на работния плот. Страниците поддържат собствените си взаимодействия с кликване и могат да бъдат наблюдавани паралелно. След като попаднете на страница, можете да използвате различни начини за намиране на съдържание, за да си взаимодействате, като използвате CSS или XPath селектори, HTML атрибути или текст. Ако сте запознати със Selenium, трябва да намерите навигация през страници, познати, с добавената възможност да изчакате дадена страница да се зареди напълно или динамичното съдържание да бъде изобразено в еднолично уеб приложение.

Можете да използвате функции за оценка, за да изпращате параметри към и от уеб страници към JavaScript код, работещ в контекста на страницата. Резултатите се връщат на тест за изпълнение на скрипт в Node.js за анализ, като ви предоставят инструментите, необходими за преминаване или неуспешно тестване. Драматургът работи с разработчиците на браузъра F12, така че може да направи много повече от просто взаимодействие със съдържанието на страницата. Той може да наблюдава мрежовия трафик, така че можете да го използвате, за да тествате както удостоверяване, така и изтегляне на файлове, наред с други неща. Той може да осъществи достъп до конзолата на браузъра и да запише грешки, които може да не се видят веднага в изобразена страница: например, проследяване на CSS проблеми или JavaScript библиотеки, които не се зареждат.

В Playwright има много неща и това е убедителна алтернатива на Selenium за тестване на браузърни приложения. С непрекъснатото добавяне на Microsoft към инструментите за разработчици F12 в Edge, ще бъде интересно да гледате как Playwright добавя нови функции, които разширяват опциите ви за тестване на хоствани от браузъра приложения и прогресивни уеб приложения заедно с традиционните уеб приложения.

Отвъд JavaScript: Тестване в Python и C #

Microsoft наскоро пусна нова версия на Playwright за разработчици, които предпочитат да изграждат тестове в Python, а не в JavaScript. Това е полезна опция, тъй като много от съществуващите рамки за тестване на Selenium са базирани на Python и ви позволява да свържете своя код за тестване с аналитични пакети за по-подробен анализ на резултатите, използвайки богатата на Python екосистема от статистически приложения и инструменти.

Playwright включва езикови обвързвания за C #, така че можете да въведете Playwright в съществуващите тестови рамки за ASP.NET или други .NET инструменти. Не трябва да променяте начина си на работа, за да въведете нови инструменти, а Microsoft обещава допълнителни езикови обвързвания за Java и Ruby. Има перспектива за още в бъдеще, тъй като в документацията на драматург се посочва, че тя е предназначена да поддържа обвързване за всеки език. С целия код на GitHub има възможност да създадете свои собствени обвързвания за избрания от вас тестов език и да ги изпратите като заявка за изтегляне към проекта.