Playwright и Puppeteer се две од најпопуларните алатки за автоматизација на прелистувачи, но се разликуваат по перформанси и можности. Во оваа статија ќе ги споредиме рамо до рамо за да ви помогнеме да одлучите кој одговара на вашите потреби. Сепак, важно е да се запомни дека додека веб-страниците стануваат потешки за пристап со автоматизирани скрипти, ефикасноста на кодот е само половина од битката. Затоа, ќе разговараме и за тоа како можат да помогнат да се избегнат прекини и да се скалира автоматизацијата сигурно, со врски до наменски водичи за интеграција за двете библиотеки. прокси решенијата Што е Playwright? Playwright е модерна, отворена рамка развиена од Мајкрософт за тестирање од крај до крај и автоматизација на прелистувачи. Им овозможува на програмерите да комуницираат со веб-апликации преку сите модерни мотори – Chromium (Chrome & Edge), Firefox и WebKit (моторот на Safari) – на Windows, Linux и macOS. Додека е изграден на , Playwright поддржува повеќе програмски јазици, вклучувајќи JavaScript, TypeScript, Python, Java и .NET (C#), што го прави сеопфатна алатка за тимови со разновидни технолошки стекови. За веб-гребење, способноста на Playwright да управува со повеќе изолирани контексти на прелистувачот (секој со свои колачиња и поставки за прокси) овозможува високо ефикасно, паралелно извлекување податоци без големо оптоварување на меморијата на повеќе процеси на прелистувачот. Node.js Клучна предност на Playwright е неговата сигурност. Содржи автоматско чекање, што осигурува дека елементите се подготвени пред да се изврши интеракција, значително намалувајќи ја нестабилноста на тестовите. Исто така, поддржува повеќеконтекст прелистување, дозволувајќи ви да изолирате повеќе страници или iframe во истата сесија на прелистувачот. Освен основна автоматизација, нуди интерцепција на мрежата, снимање видео и емулација на мобилни уреди. Иако е релативно нов во споредба со Puppeteer, Playwright брзо стана лидер во ова поле. Неговата способност да доставува конзистентни, преку-прелистувачки резултати и неговиот моќен вграден тестер го прават врвен избор за модерно веб-развивање. Што е Puppeteer? Puppeteer е отворена библиотека развиена од Google за автоматизација на прелистувачи базирани на Chrome и Chromium. Главно е изградена на протоколот Chrome DevTools (CDP), давајќи им на програмерите контрола над внатрешноста на прелистувачот, правејќи го лесен, брз и високо оптимизиран за задачи специфични за Chrome. Node.js Puppeteer работи и во режим без глава (headless) и со глава (headful). Тоа е стандардна алатка за веб-гребење, генерирање PDF и автоматско снимање екран. Поради неговата тесна интеграција со моторот Chromium, често добива пристап до нови функции на прелистувачот пред другите рамки за автоматизација. Додека Puppeteer се истакнува во екосистемот Chromium (вклучувајќи го и Microsoft Edge), неговите преку-прелистувачки можности се поограничени од конкурентите како Playwright. На пример, иако сега нуди стабилна поддршка за Firefox преку проектот WebDriver BiDi, сè уште нема мајчин WebKit (Safari) поддршка. Puppeteer е создаден специјално за екосистемот Node.js и официјално поддржува само JavaScript и TypeScript. Иако постојат неофицијални преноси како Pyppeteer за Python, овие проекти на заедницата честопати немаат чести ажурирања обезбедени од основната библиотека. И покрај оваа потесна поддршка за јазици, Puppeteer останува еден од врвните избори поради неговата едноставност, брзина и големата поддршка од заедницата за автоматизација фокусирана на Chrome. Playwright наспроти Puppeteer: резимирано споредба За оние што бараат брз одговор, еве TL:DR табела за споредба Playwright наспроти Puppeteer: Карактеристика 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/ , Мајкрософт обезбедува и одржува висококвалитетни врски за јазици за 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, има многу мал overhead. Со оглед на брзината на стартување, Puppeteer може да лансира прелистувач и да изврши едноставна команда (на пр., да направи скриншот на една страница) побрзо од Playwright во многу бенчмарк. Зошто? Бидејќи нема дополнителни слоеви што Playwright ги користи за поддршка на повеќе јазици и типови прелистувачи. Значи, ако вашата цел е да извршите илјадници мали и независни задачи, Puppeteer е тешко да се победи. Спротивно на тоа, Playwright е многу поефикасен во сложени, повеќестранични сценарија благодарение на неговата функција BrowserContexts. Да го споредиме со Puppeteer: во Puppeteer, ако сакате да извршите 10 различни сесии за гребење со целосна изолација, морате да лансирате 10 одделни процеси на прелистувач. Овој процес се смета за тежок и троши значителна RAM меморија. Она што Playwright ви овозможува да го направите е да лансирате еден процес на прелистувач и да создадете десетици изолирани контексти во него – секој контекст се однесува како сосема нов прозорец на прелистувач, но ја споделува истата основна меморија. Како резултат на тоа, Playwright користи значително помалку CPU и меморија од Puppeteer кога се скалира при голема јачина. Документација и поддршка од заедницата Puppeteer е долго време индустриски стандард, но Playwright брзо постави нов стандард за тоа како треба да бидат документирани алатките за програмери. Puppeteer, сметан за зрел ветеран, има повеќегодишна предност, што му помогна да создаде масовна база на знаење низ интернетот. На пример, ако наидете на бизарна грешка во Puppeteer, голема е веројатноста некој друг ја решил пред три години на Stack Overflow или GitHub. Дополнително, бидејќи Puppeteer постои толку долго, заедницата изградила специјализирани алатки кои не се официјално поддржани. Генерално, документацијата на Puppeteer е директна – тоа е библиотека, а нејзините документи ја одразуваат таа едноставност. Иако Playwright е помлад, тој е поддржан од огромните ресурси на Мајкрософт. Неговата документација не ви кажува само како да кликнете на копче – таа обезбедува детални, илустрирани водичи за модерни предизвици. Бидејќи Playwright вклучува алатки од први раце, приклучоците од заедницата се помалку потребни. Безбедно е да се каже дека денес, Playwright го надмина Puppeteer во обезбедување безбедносна мрежа за програмери – додека Playwright може да има помалку стари нишни блог постови, неговата официјална документација е толку темелна што ретко кога треба да барате на друго место. Можности за веб-гребење Современите веб-страници ретко се само статички HTML – тие се динамички апликации што вчитуваат податоци додека скролате или кликате. За ефикасно гребење на овие веб-страници, ви треба алатка што може да размислува и да дејствува како реален прелистувач. И додека и Playwright и Puppeteer се одлични во извлекување податоци, тие претставуваат различни стратегии. Справување со динамичка содржина Двете библиотеки добро се справуваат со содржини тешки за JavaScript, но се разликуваат во начинот на кој чекаат податоци. Поради неговото вградено автоматско чекање, Playwright е отпорен при гребење на страници што вчитуваат податоци со непредвидливи брзини. Тој нема да се обиде да изгребе наслов на производ или цена се додека не биде целосно рендериран и видлив, што ги прави вашите гребачи помалку веројатно да се расипат за време на бавен скок на мрежата. Puppeteer ви дава контрола. Ако треба да пресретнете специфично барање на мрежата во моментот кога ќе се случи, интеграцијата на Puppeteer со Chrome DevTools Protocol (CDP) обезбедува ниво на контрола што ја бараат напредните програмери. Скалирање Кога треба да изгребате 10K страници, перформансите се сведуваат на бројки. Playwright, со неговата функција BrowserContext, генерално е победник за скалирање: можете да извршите стотици изолирани сесии
