Playwright і Puppeteer - гэта два з самых папулярных інструментаў для аўтаматызацыі браўзэра, але яны адрозніваюцца па прадукцыйнасці і магчымасцям. У гэтым артыкуле мы параўнаем іх бок аб бок, каб дапамагчы вам вырашыць, які з іх адпавядае вашым патрэбам. Аднак важна памятаць, што паколькі вэб-сайты становяцца ўсё больш складанымі для доступу з дапамогай аўтаматызаваных сцэнарыяў, эфектыўнасць кода - гэта толькі палова бітвы. Вось чаму мы таксама абмяркуем, як могуць дапамагчы пазбегнуць перапынкаў і надзейна маштабаваць аўтаматызацыю, са спасылкамі на спецыяльныя кіраўніцтва па інтэграцыі для абедзвюх бібліятэк. праксі-рашэнні Што такое Playwright? Playwright - гэта сучасная, адкрытая платформа, распрацаваная Microsoft для тэсціравання ад пачатку да канца і аўтаматызацыі браўзэра. Яна дазваляе распрацоўнікам узаемадзейнічаць з вэб-прыкладаннямі ва ўсіх сучасных рухавіках - Chromium (Chrome & Edge), Firefox і WebKit (рухавік Safari) - у Windows, Linux і macOS. Нягледзячы на тое, што Playwright створаны на базе , ён падтрымлівае некалькі моў праграмавання, уключаючы JavaScript, TypeScript, Python, Java і .NET (C#), што робіць яго універсальным інструментам для каманд з разнастайнымі тэхналогічнымі стэкамі. Для вэб-скрэпінгу здольнасць Playwright кіраваць некалькімі ізаляванымі кантэкстамі браўзэра (кожны са сваімі файламі cookie і наладамі проксі) дазваляе высокаэфектыўна, паралельна здабываць даныя без накладных выдаткаў на памяць некалькіх працэсаў браўзэра. Node.js Ключавая перавага Playwright - яго надзейнасць. Ён мае функцыю аўтаматычнага чакання, якая гарантуе, што элементы будуць дзейснымі перад выкананнем узаемадзеяння, значна памяншаючы няўстойлівасць тэстаў. Ён таксама падтрымлівае шматкантэкстны браўзінг, дазваляючы ізаляваць некалькі старонак або iframe ў адной сесіі браўзэра. Акрамя базавай аўтаматызацыі, ён прапануе натыўнае перахопліванне сеткі, запіс відэа і эмуляцыю мабільных прылад. Нягледзячы на тое, што Playwright адносна новы ў параўнанні з Puppeteer, ён хутка стаў лідэрам у гэтай галіне. Яго здольнасць даваць стабільныя, кросбраўзэрныя вынікі і яго магутны ўбудаваны тэставы прагоншчык робяць яго лепшым выбарам для сучаснай вэб-распрацоўкі. Што такое Puppeteer? Puppeteer - гэта адкрытая бібліятэка , распрацаваная Google для аўтаматызацыі браўзэраў Chrome і на аснове Chromium. Яна ў асноўным пабудавана на пратаколе Chrome DevTools (CDP), што дае распрацоўнікам кантроль над унутранымі кампанентамі браўзэра, робячы яго лёгкім, хуткім і высока аптымізаваным для задач, звязаных з Chrome. Node.js Puppeteer працуе як у рэжыме без графічнага інтэрфейсу, так і з графічным інтэрфейсам. Гэта стандартны інструмент для вэб-скрэпінгу, стварэння PDF-файлаў і аўтаматычнага захопу скрыншотаў. Дзякуючы цеснай інтэграцыі з рухавіком Chromium, ён часта атрымлівае доступ да новых функцый браўзэра раней за іншыя платформы аўтаматызацыі. У той час як Puppeteer выдатна працуе ў экасістэме Chromium (уключаючы Microsoft Edge), яго кросбраўзэрныя магчымасці больш абмежаваныя, чым у канкурэнтаў, такіх як Playwright. Напрыклад, нягледзячы на тое, што ён цяпер забяспечвае стабільную падтрымку Firefox праз праект WebDriver BiDi, ён па-ранейшаму не мае натыўнай падтрымкі WebKit (Safari). Puppeteer створаны спецыяльна для экасістэмы Node.js і афіцыйна падтрымлівае толькі JavaScript і TypeScript. Нягледзячы на тое, што існуюць неафіцыйныя парты, такія як Pyppeteer, для Python, гэтыя супольнасныя праекты часта не атрымліваюць частых абнаўленняў, якія прадастаўляюцца асноўнай бібліятэкай. Нягледзячы на гэтую вузкую падтрымку моў, Puppeteer застаецца адным з лепшых выбараў дзякуючы сваёй прастаце, хуткасці і вялікай падтрымцы супольнасці для аўтаматызацыі, арыентаванай на Chrome. Параўнанне Playwright і Puppeteer: рэзюмэ Для тых, хто шукае хуткі адказ, вось табліца параўнання Playwright і Puppeteer TL:DR: Функцыя Playwright Puppeteer Асноўная мэта Кросбраўзэрнае E2E тэсціраванне, аўтаматызацыя і скрапінг Сканцэнтраваная аўтаматызацыя Chromium і скрапінг Падтрымоўваныя платформы Windows, macOS, Linux Windows, macOS, Linux Падтрымка моў JavaScript, TypeScript, Python, Java, .NET (C#) JavaScript і TypeScript Падтрымка браўзэраў Chromium, Firefox, WebKit Chromium, Firefox (праз WebDriver BiDi) Архітэктура Драйвер на аснове WebSocket (абстрагуе ўсе пратаколы) Chrome DevTools Protocol (CDP) / WebDriver BiDi Кліент Асінхронны і сінхронны Асінхронны Канфігурацыя рэжыму Рэжым з графічным інтэрфейсам і без графічнага інтэрфейсу (абодва першакласныя) Рэжым з графічным інтэрфейсам і без графічнага інтэрфейсу (абодва першакласныя) Дакументацыя Добрая; фокус на тэсціраванні і адладцы Выдатная; сталая і простая Падтрымка супольнасці Велізарная экасістэма; шырокая супольнасць Велізарная экасістэма; шырокая супольнасць Стратэгія чакання Аўтаматычнае чаканне (убудаваная надзейнасць) Ручное чаканне (патрабуе ) waitForSelector Параўнанне падтрымкі браўзэраў Найбольш відавочная перавага Playwright - яго натыўная падтрымка ўсіх трох асноўных рухавікоў браўзэраў: Chromium, Firefox і WebKit. Апошні робіць Playwright выбарам для распрацоўнікаў, якім трэба пераканацца, што іх вэб-прыкладанні бездакорна працуюць на iOS або macOS, паколькі ён можа імітаваць паводзіны Safari праз WebKit на любой аперацыйнай сістэме. Наадварот, Puppeteer застаецца бібліятэкай, арыентаванай на Chromium. Нягледзячы на тое, што ён стабілізаваўся і афіцыйна запусціў першакласную падтрымку Firefox праз пратакол WebDriver BiDi, ён па-ранейшаму не мае натыўнай падтрымкі WebKit. Калі вам патрэбна тэсціраванне для Safari або вы шукаеце кросбраўзэрны вопыт, Playwright па-ранейшаму з'яўляецца відавочным пераможцам. Дзве бібліятэкі таксама адрозніваюцца тым, як яны кіруюць браўзэрамі. Playwright пастаўляецца з уласнымі "патчанымі" версіямі бінарных файлаў браўзэраў. Гэтыя патчы дазваляюць Playwright экспанаваць нізкаўзроўневыя API, недаступныя ў стандартных браўзэрах. Гэта таксама дазваляе выкарыстоўваць такія функцыі, як аўтаматычнае чаканне і перадавая перахопліванне сеткі. Аднак ёсць нюанс. Паколькі гэтыя браўзэры мадыфікаваныя, існуе тэарэтычны рызыка, што тэст можа прайсці ў спатчаным браўзэры Playwright, але не прайсці ў рэальным браўзэры. Puppeteer, з іншага боку, першапачаткова пабудаваў сваю рэпутацыю на Chrome DevTools Protocol (CDP). Сёння ён рухаецца да WebDriver BiDi, новага галіновага стандарту. Гэта, па сутнасці, азначае, што Puppeteer працуе больш цесна з стандартнымі версіямі браўзэраў, прадастаўленымі вытворцамі, што часта азначае лепшую доўгатэрміновую стабільнасць і ніжэйшы рызыку ілжывых станоўчых вынікаў падчас тэсціравання. Варыянты моў праграмавання Інструмент карысны толькі настолькі, наколькі ён сумяшчальны з існуючымі навыкамі вашай каманды. Вось чаму, калі справа даходзіць да выбару мовы праграмавання, выбар паміж Playwright і Puppeteer залежыць ад вашага тэхналогічнага стэка. Playwright распрацаваны з паліглотнай філасофіяй - ён створаны так, каб быць даступным для амаль любой сучаснай каманды распрацоўшчыкаў. Нягледзячы на тое, што асноўны рухавік напісаны на TypeScript/ , Microsoft прадастаўляе і падтрымлівае якасныя моўныя прывязкі для JavaScript, TypeScript, Python, Java і C#/.NET. Больш за тое, паколькі гэта афіцыйныя прывязкі, вы атрымліваеце эквівалентнасць функцый ва ўсіх мовах - функцыя, выпушчаная для , амаль адразу даступная для карыстальнікаў Python ці Java. Node.js Node.js Puppeteer, наадварот, строга з'яўляецца бібліятэкай , прызначанай для JavaScript і TypeScript. Калі вы працуеце ў экасістэме JS, Puppeteer будзе адчувацца як натыўнае пашырэнне вашага працоўнага працэсу. Але калі вы распрацоўшчык Python, вам вельмі не пашанцавала з афіцыйнай бібліятэкай Puppeteer. Так, ёсць неафіцыйныя парты, такія як Pyppeteer для Python, але гэта толькі праекты, якія кіруюцца супольнасцю і больш не падтрымліваюцца. Node.js Працэс устаноўкі і налады Цяпер паглядзім, як мы можам выкарыстоўваць Playwright і Puppeteer для выканання базавай задачы вэб-скрэпінгу. Папярэднія патрабаванні Для пачатку вам трэба будзе ўсталяваць (Node Package Manager) на вашым кампутары. Вы можаце зрабіць гэта, перайшоўшы па гэтай . npm спасылцы Затым вы можаце адкрыць тэрмінал і выканаць гэтыя каманды, каб стварыць новую папку і ініцыялізаваць новы праект Node. Звычайна гэта стварае файл у каталогу. package.json mkdir playwright-pupeteer cd playwright-pupeteer npm init -y Устаноўка бібліятэк Цяпер, калі праект настроены, усталюем Playwright і Puppeteer у бягучы праект. Вы можаце зрабіць гэта, выканаўшы наступныя каманды: npm install puppeteer npm install playwright npx playwright install Як бачыце, пры ўсталёўцы Playwright нам трэба выканаць дадатковую каманду . Гэта таму, што Playwright па змаўчанні не ўключае браўзэр у камплект. Вам трэба выканаць апошнюю паказаную каманду, каб усталяваць браўзэры па змаўчанні, якія ён прапануе. npx playwright install Puppeteer, наадварот, мае ўбудаваны Chrome па змаўчанні; таму дадатковая каманда не патрабуецца. Скрапінг сайта з Playwright Цяпер, калі наша налада завершана, давайце паглядзім, як вы можаце выкарыстоўваць Playwright для скрапінгу сайта. Мы будзем выкарыстоўваць у якасці мэты скрапінгу для гэтага прыкладу. Паколькі пясчаная скрыня імітуе электронны магазін, мы будзем скрапіць назву і статус запасаў кожнага элемента на старонцы. Oxylabs Sandbox Давайце пачнем са стварэння файла JavaScript пад назвай у вашай папцы праекта. Пасля таго, як вы яго атрымаеце, вам трэба будзе імпартаваць залежнасць з пакета Playwright. Вось як гэта павінна выглядаць: playwright.js chromium import { chromium } from 'playwright'; Далей, давайце выканаем першыя крокі большасці прыкладанняў Playwright: адкрыццё браўзэра і пераход на сайт. Мы можам пачаць з вызначэння URL пясчанай скрыні скрапінгу ў зменнай, вось так: const URL = 'https://sandbox.oxylabs.io/products'; Цяпер запусцім браўзэр і адкрыем новую старонку вось так: const browser = await chromium.launch(); const page = await browser.newPage(); Як толькі мы ініцыялізуем нашу зменную page, мы можам пачаць працэс скрапінгу. Дадайце гэтыя радкі, каб перайсці на старонку па раней вызначаным URL: await page.goto(URL); await page.waitForLoadState('networkidle'); Другі радок гарантуе, што ўсе кампаненты будуць загружаны перад пачаткам скрапінгу, каб мы не прапусцілі патрэбныя даныя. Цяпер, калі даныя загружаны, мы можам выкарыстоўваць просты CSS-селектар для выбару кожнага прадукту з сайта. Кожны прадукт у пясчанай скрыні мае CSS-клас , таму будзем выкарыстоўваць яго ў якасці нашага селектара. .product-card Каб зрабіць гэта, давайце стварымо ананімную функцыю для метаду аб'екта page, якая ў канчатковым выніку верне кожны прадукт з сабраных даных. Яна павінна выглядаць так: evaluate const products = await page.evaluate(() => { }) Унутры ананімнай функцыі запытаем кожны прадукт на старонцы вось так: const products = await page.evaluate(() => { const productCards = document.querySelectorAll('.product-card'); }) Далей, мы павінны прайсціся па кожнай картцы прадукту і адпавядаць назву і статус запасу ў новым аб'екце. Паколькі статус запасу не мае агульнага CSS-класа, мы будзем выбіраць тэкст і асобна і параўноўваць іх, каб вызначыць, які з іх існуе. Вось як гэта павінна выглядаць: Out of Stock In Stock const products = await page.evaluate(() => { const productCards = document.querySelectorAll('.product-card'); return Array.from(productCards).map(card => { const inStock = card.querySelector('p.in-stock')?.innerText; const outOfStock = card.querySelector('p.out-of-stock')?.innerText; const title = card.querySelector('h4.title')?.innerText; return { title: title, stockStatus: inStock ? 'In Stock' : outOfStock ? 'Out of Stock' : '' }; }); }) Пасля гэтага мы можам вывесці вернутыя прадукты з дапамогай простага вываду і закрыць браўзэр вось так: console.log(products); await browser.close() Калі вы запусціце код, вы павінны ўбачыць нешта падобнае ў вашым тэрмінале: [ { title: 'The Legend of Zelda: Ocarina of Time', stockStatus: 'In Stock' }, { title: 'Super Mario Galaxy', stockStatus: 'Out of Stock' }, { title: 'Super Mario Galaxy 2', stockStatus: 'In Stock' }, { title: 'Metroid Prime', stockStatus: 'Out of Stock' }, { title: 'Super Mario Odyssey', stockStatus: 'In Stock' }, { title: 'Halo: Combat Evolved', stockStatus: 'Out of Stock' }, ... ] Вось як павінен выглядаць поўны скрыпт: import { chromium } from 'playwright'; const URL = 'https://sandbox.oxylabs.io/products'; const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto(URL); await page.waitForLoadState('networkidle'); const products = await page.evaluate(() => { const productCards = document.querySelectorAll('.product-card'); return Array.from(productCards).map(card => { const inStock = card.querySelector('p.in-stock')?.innerText; const outOfStock = card.querySelector('p.out-of-stock')?.innerText; const title = card.querySelector('h4.title')?.innerText; return { title: title, stockStatus: inStock ? 'In Stock' : outOfStock ? 'Out of Stock' : '' }; }); }); console.log(products); await browser.close(); Далей, паглядзім, як мы б выканалі тую ж задачу, выкарыстоўваючы Puppeteer. Скрапінг сайта з Puppeteer Для пачатку створым яшчэ адзін файл у тым жа каталогу пад назвай . puppeteer.js Пасля таго, як вы яго атрымаеце, вы можаце адкрыць яго і імпартаваць бібліятэку . Як згадвалася раней, Puppeteer уключае Chrome, таму нам не трэба імпартаваць дадатковую залежнасць браўзэра. Імпарту вось так дастаткова: puppeteer puppeteer import puppeteer from "puppeteer"; Астатняя частка скрыпта застаецца ў значнай ступені такой жа, як і ў прыкладзе Playwright, за выключэннем некаторых невялікіх адрозненняў. Як і раней, мы запускаем браўзэр, адкрываем старонку, пераходзім па URL пясчанай скрыні скрапінгу і збіраем даныя. Вось як гэта павінна выглядаць: import puppeteer from "puppeteer"; const URL = "https://sandbox.oxylabs.io/products"; const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL); await page.waitForNetworkIdle(); const products = await page.evaluate(() => { const productCards = document.querySelectorAll(".product-card"); return Array.from(productCards).map((card) => { const inStock = card.querySelector("p.in-stock")?.innerText; const outOfStock = card.querySelector("p.out-of-stock")?.innerText; const title = card.querySelector("h4.title")?.innerText; return { title: title, stockStatus: inStock ? "In Stock" : outOfStock ? "Out of Stock" : "", }; }); }); console.log(products); await browser.close(); Падабенствы і адрозненні Адзінае адрозненне паміж гэтымі прыкладамі заключаецца ў тым, як кожная бібліятэка апрацоўвае чаканне змены стану сеткі. У Playwright нам трэба выразна паказаць, якога стану сеткі мы чакаем у аргуменце метаду, вось так: await page.waitForLoadState("networkidle"); У той час як Puppeteer прадастаўляе асобны метад для чакання, пакуль сетка не стане неактыўнай, вось так: await page.waitForNetworkIdle(); Вядома, больш адрозненняў стануць відавочнымі, калі вы будзеце вырашаць больш складаныя выпадкі выкарыстання. Аднак гэты невялікі прыклад паказвае, што, акрамя некаторых функцыянальных адрозненняў, як Playwright, так і Puppeteer выконваюць аднолькавыя базавыя задачы падобным чынам. Дызайн API і прастата выкарыстання Калі вы калі-небудзь пісалі браўзэрны скрыпт, які бездакорна працуе на вашым кампутары, але выпадкова падае ў воблаку, вы адчувалі няўстойлівасць. Спосаб, якім абедзве гэтыя бібліятэкі апрацоўваюць час загрузкі старонкі, з'яўляецца найбольшым фактарам таго, наколькі фруструючым (ці гладкім) будзе ваш працэс распрацоўкі. Playwright быў створаны для вырашэння праблемы няўстойлівасці, уводзячы два паняцці: - у большасці інструментаў аўтаматызацыі, калі вы кажаце скрыпту "націснуць кнопку ўваходу", ён можа паспрабаваць націснуць яе да таго, як кнопка скончыць загрузку, што прывядзе да збою скрыпта. Playwright аўтаматычна чакае, пакуль элемент стане дзейсным - ён правярае, ці кнопка бачная, стабільная і ўключаная - перш чым спрабаваць націснуць. Аўтаматычнае чаканне - лакатар - гэта спосаб апісання таго, як знайсці элемент (напрыклад, "знайсці кнопку, на якой напісана Submit"). У адрозненне ад старых метадаў, якія знаходзяць элемент адзін раз, а потым губляюць яго, калі старонка абнаўляецца, Playwright Locator застаецца актыўным і будзе зноў знаходзіць элемент кожны раз, калі ён вам патрэбен. Лакатары Puppeteer больш практычны - ён дае вам інструменты для ўзаемадзеяння з браўзэрам, але ён не робіць столькі цяжкай працы за вас. Напрыклад, у Puppeteer вам трэба дакладна сказаць скрыпту, калі чакаць. Праз некаторы час вы будзеце пісаць нешта накшталт перад амаль кожным дзеяннем. Калі вы забудзеце каманду чакання або сайт будзе загружацца даўжэй, чым звычайна, ваш скрыпт, хутчэй за ўсё, пацярпіць няўдачу. Такім чынам, вы можаце атрымаць больш кантролю, але вам таксама трэба напісаць больш радкоў кода для апрацоўкі тых жа задач, якія Playwright апрацоўвае аўтаматычна. await page.waitForSelector('.login-btn') Прадукцыйнасць і хуткасць Няма адзінага міжнародна ўзгодненага варыянту, калі гаворка ідзе пра самую хуткую бібліятэку, таму што гэта цалкам залежыць ад маштабу вашага праекта. Аднак абодва інструменты, безумоўна, хутчэйшыя за старыя платформы, такія як Selenium, але яны маюць розныя профілі прадукцыйнасці. Puppeteer часта ідэальна падыходзіць для кароткіх, аднаразовых скрыптоў або праектаў. Паколькі гэта лёгкая бібліятэка з прамым, нізкаўзроўневым злучэннем з Chromium, яна мае вельмі мала накладных выдаткаў. Улічваючы хуткасць запуску, Puppeteer можа запусціць браўзэр і выканаць простую каманду (напрыклад, зрабіць скрыншот адной старонкі) хутчэй, чым Playwright, паводле многіх бенчмаркаў. Чаму? Таму што ён не мае дадатковых слаёў, якія Playwright выкарыстоўвае для падтрымкі некалькіх моў і тыпаў браўзэраў. Такім чынам, калі ваша мэта - запускаць тысячы малюсенькіх і незалежных задач, Puppeteer цяжка пераўзысці. Наадварот, Playwright значна больш эфектыўны ў складаных, шматстаронкавых сцэнарыях дзякуючы сваёй функцыі BrowserContexts. Давайце параўнаем яго з Puppeteer: у Puppeteer, калі вы хочаце запусціць 10 розных сеансаў скрапінгу з поўнай ізаляцыяй, вам трэба запусціць 10 асобных працэсаў браўзэра. Гэты працэс лічыцца цяжкім і спажывае значную колькасць аператыўнай памяці. Playwright дазваляе вам запусціць адзін працэс браўзэра і стварыць дзесяткі ізаляваных кантэкстаў у ім - кожны кантэкст паводзіць сябе як зусім новае акно браўзэра, але падзяляе тую ж асноўную памяць. У выніку Playwright выкарыстоўвае значна менш працэсара і памяці, чым Puppeteer, пры маштабаванні пры вялікіх аб'ёмах. Дакументацыя і падтрымка супольнасці Puppeteer доўгі час быў галіновым стандартам, але Playwright хутка ўстанавіў новы стандарт для дакументацыі інструментаў распрацоўшчыкаў. Puppeteer, лічачыся сталалым ветэранам, мае шматгадовую перавагу, што дапамагло яму стварыць велізарную базу ведаў у Інтэрнэце. Напрыклад, калі вы сутыкнецеся з дзіўнай памылкай у Puppeteer, ёсць вялікая верагоднасць, што хтосьці яшчэ вырашыў яе тры гады таму на Stack Overflow або GitHub. Акрамя таго, паколькі Puppeteer існуе так доўга, супольнасць стварыла спецыялізаваныя інструменты, якія не падтрымліваюцца афіцыйна. У цэлым, дакументацыя Puppeteer зразумелая - гэта бібліятэка, і яе дакументацыя адлюстроўвае гэтую прастату. Нягледзячы на тое, што Playwright маладзейшы, ён падтрымліваецца масавы
