Playwright және Puppeteer – браузерді автоматтандыруға арналған ең танымал құралдар, бірақ олар өнімділік пен мүмкіндіктер бойынша ерекшеленеді. Бұл мақалада сізге қайсысы сіздің қажеттіліктеріңізге сәйкес келетінін шешуге көмектесу үшін оларды жанынан салыстырамыз. Алайда, веб-сайттарды автоматтандырылған скрипттермен қол жеткізу қиындаған сайын, код тиімділігі тек жартылай шайқас екенін есте ұстаған жөн. Сондықтан біз үзілістерді болдырмауға және автоматтандыруды сенімді түрде масштабтауға қалай көмектесетінін, екі кітапханаға арналған арнайы интеграциялық нұсқаулықтарға сілтемелермен талқылаймыз. прокси шешімдері Playwright дегеніміз не? Playwright – Microsoft әзірлеген, end-to-end тестілеу және браузерді автоматтандыруға арналған заманауи, ашық бастапқы кодты фреймворк. Ол әзірлеушілерге Windows, Linux және macOS жүйелеріндегі барлық заманауи қозғалтқыштар – Chromium (Chrome & Edge), Firefox және WebKit (Safari қозғалтқышы) арқылы веб-қолданбалармен өзара әрекеттесуге мүмкіндік береді. негізінде жасалған болса да, Playwright JavaScript, TypeScript, Python, Java және .NET (C#) сияқты бірнеше бағдарламалау тілдерін қолдайды, бұл оны әртүрлі технологиялық стектері бар командалар үшін жан-жақты құрал етеді. Веб-скрейпинг үшін Playwright-тің бірнеше оқшауланған браузер контексттерін (әрқайсысының өз кукилері мен прокси параметрлері бар) басқару мүмкіндігі, бірнеше браузер процестерінің жадты арттыруынсыз жоғары тиімді, параллельді деректерді шығаруға мүмкіндік береді. Node.js Playwright-тің негізгі артықшылығы – оның сенімділігі. Ол элементтермен әрекеттесуді орындау алдында олардың іс-қимылға дайын екендігіне көз жеткізетін авто-жауап беруді қамтиды, бұл тесттердің жиі сәтсіздікке ұшырауын айтарлықтай азайтады. Ол сондай-ақ бірдей браузер сессиясында бірнеше беттерді немесе iframe-терді оқшаулауға мүмкіндік беретін көп контексті браузингті қолдайды. Негізгі автоматтандырудан тыс, ол желіні араласу, бейнені жазу және мобильді құрылғы эмуляциясын ұсынады. Puppeteer-мен салыстырғанда салыстырмалы түрде жаңа болғанымен, Playwright тез арада бұл салада көшбасшы болды. Тұрақты, кросс-браузер нәтижелерді жеткізу мүмкіндігі және қуатты кіріктірілген тест-жүргізгіші оны заманауи веб-даму үшін таңдаулы нұсқаға айналдырады. Puppeteer дегеніміз не? Puppeteer – Google әзірлеген, Chrome және Chromium-негізделген браузерлерді автоматтандыруға арналған ашық бастапқы кодты кітапханасы. Ол негізінен Chrome DevTools Protocol (CDP) негізінде жасалған, бұл әзірлеушілерге браузердің ішкі жұмысын бақылауға мүмкіндік береді, оны жеңіл, жылдам және Chrome-ға арналған тапсырмалар үшін жоғары оңтайландырылған етеді. Node.js Puppeteer құбырсыз және құбырлы режимдерде жұмыс істейді. Ол веб-скрейпинг, PDF генерациялау және автоматтандырылған скриншот жасау үшін стандартты құрал болып табылады. Chromium қозғалтқышымен тығыз интеграцияланғандықтан, ол басқа автоматтандыру фреймворктарына дейін жаңа браузер мүмкіндіктеріне қол жеткізе алады. Puppeteer Chromium экожүйесінде (Microsoft Edge-ті қоса алғанда) тамаша болғанымен, оның кросс-браузер мүмкіндіктері Playwright сияқты бәсекелестерден гөрі шектеулі. Мысалы, WebDriver BiDi жобасы арқылы Firefox үшін тұрақты қолдау көрсетсе де, ол әлі де WebKit (Safari) үшін жергілікті қолдауды ұсынбайды. Puppeteer тек Node.js экожүйесі үшін жасалған және тек JavaScript пен TypeScript-ті ресми түрде қолдайды. Python үшін Pyppeteer сияқты бейресми порттар болғанымен, бұл қауымдастық жобалары негізгі кітапхана ұсынатын жиі жаңартулардан ада болады. Осы тарылған тілдік қолдауға қарамастан, Puppeteer оның қарапайымдылығы, жылдамдығы және Chrome-ға бағытталған автоматтандыру үшін үлкен қауымдастық қолдауының арқасында таңдаулы нұсқалардың бірі болып қала береді. Playwright vs. Puppeteer: қысқаша салыстыру Қысқа жауап іздейтіндер үшін, міне, TL:DR Playwright vs 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 жүйелерінде тамаша жұмыс істейтініне көз жеткізгісі келетін әзірлеушілер үшін таңдаулы таңдау етеді, өйткені ол кез келген операциялық жүйеде WebKit арқылы Safari мінез-құлқын эмуляциялай алады. Керісінше, Puppeteer Chromium-ға бағытталған кітапхана болып қала береді. WebDriver BiDi протоколы арқылы ресми түрде бірінші класслы Firefox қолдауын тұрақтандырып, іске қосқанымен, ол әлі де 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 кітапханасымен жолыңыз болмайды. Иә, Python үшін Pyppeteer сияқты бейресми порттар бар, бірақ бұл тек қауымдастық басқаратын жобалар, олар енді қолдау көрсетілмейді. 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-ты скрейпинг нысаны ретінде пайдаланамыз. Sandbox электрондық коммерция сайтына ұқсайтындықтан, біз беттегі әрбір элементтің атауын және қоймадағы статусын скрейпинг жасаймыз. Бастау үшін, жоба қалтасында деп аталатын JavaScript файлын жасайық. Ол болғаннан кейін, Playwright пакетінен кірістіруін импорттауыңыз керек. Міне, ол қандай көрінеді: playwright.js chromium import { chromium } from 'playwright'; Келесі, көптеген Playwright қолданбаларының алғашқы қадамдарын орындайық: браузерді ашу және веб-сайтқа өту. Скрейпинг sandbox URL-ін осылайша айнымалыға енгізу арқылы бастауға болады: const URL = 'https://sandbox.oxylabs.io/products'; Енді, браузерді бастап, жаңа бетті осылайша ашайық: const browser = await chromium.launch(); const page = await browser.newPage(); Біздің бет айнымалысымыз инициализацияланғаннан кейін, біз скрейпинг процесін бастай аламыз. Бұрын анықталған URL мекенжайына өту үшін осы жолдарды қосыңыз: await page.goto(URL); await page.waitForLoadState('networkidle'); Екінші жол біз қажетті деректерді жіберіп алмауымыз үшін, барлық компоненттердің жүктелгеніне көз жеткізеді. Деректер жүктелгеннен кейін, біз әрбір өнімді сайттан таңдау үшін қарапайым CSS селекторын қолдана аламыз. Sandbox-тағы әрбір өнім CSS класына ие, сондықтан оны селектор ретінде қолданайық. .product-card Мұны істеу үшін, бет объектісінің әдісі үшін анонимді функция жасап, ол ақыр соңында скрейпинг жасалған деректерден әрбір өнімді қайтарады. Ол мынадай көрінуі керек: 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 мысалындағыдай болады, тек кейбір кіші айырмашылықтар бар. Бұрынғыдай, біз браузерді ашамыз, бетті ашамыз, скрейпинг sandbox 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 автоматты түрде басуды орындамас бұрын элементтің іс-әрекетке дайын екенін (батырманың көрінетін, тұрақты және белсенді екендігін тексереді) күтеді. Авто-жауап беру – локатор – элементті қалай табуға болатынын сипаттау тәсілі (мысалы, "Жіберу" деп жазылған батырманы табыңыз). Бет қайта жүктелсе, оны жоғалтатын элементті бір рет табатын ескі әдістерден айырмашылығы, Playwright локаторы тірі қалады және сізге қажет болған сайын элементті қайта табады. Локаторлар Puppeteer әлдеқайда қолмен басқарылады – ол сізге браузермен өзара әрекеттесу құралдарын береді, бірақ сіз үшін көп жұмысты өзі орындамайды. Мысалы, Puppeteer-де сіз желінің қашан күту керектігін нақты көрсетуіңіз керек. Кейбір уақыттан кейін, сіз әрбір іс-әрекет алдында сияқты нәрсені жазасыз. Егер сіз күту командасын ұмытып кетсеңіз немесе сайт әдеттегіден ұзақ жүктелсе, сіздің скриптіңіз сәтсіз болуы мүмкін. Сондықтан, сіз көбірек бақылауды ала аласыз, бірақ Playwright автоматты түрде басқаратын тапсырмаларды орындау үшін көбірек код жолдарын жазуыңыз керек. await page.waitForSelector('.login-btn') Өнімділік & жылдамдық Ең жылдам кітапханаға келгенде, халықаралық келісілген бір нұсқа жоқ, өйткені бұл жобаның масштабына толығымен байланысты. Дегенмен, екі құрал да Selenium сияқты ескі фреймворктерден әлдеқайда жылдам, бірақ олардың өнімділік профильдері әртүрлі. Puppeteer көбінесе қысқа, бір реттік скрипттерге немесе жобаларға арналған. Ол жеңіл кітапхана болғандықтан және Chromium-мен тікелей, төменгі деңгейде байланысқандықтан, оның шығындары өте аз. Іске қосу жылдамдығын ескересек, Puppeteer браузерді іске қосып, қарапайым команданы орындай алады (мысалы, бір беттің скриншотын жасау) көптеген бенчмарктерде Playwright-тен жылдам. Неге? Себебі оның Playwright сияқты бірнеше тілдер мен браузер түрлерін қолдау үшін қосымша қабаттары жоқ. Сондықтан, егер сіздің мақсатыңыз мыңдаған кішкентай және тәуелсіз тапсырмаларды орындау болса, Puppeteer-ді жеңу қиын. Керісінше, Playwright БраузерКонтекстері мүмкіндігінің арқасында күрделі, көп беттік сценарийлерде әлдеқайда тиімді. Оны Puppeteer-мен салыстырайық: Puppeteer-де, егер сіз 10 түрлі скрейпинг сессиясын толық оқшаулаумен орындағыңыз келсе, 10 бөлек браузер процесін іске қосуыңыз керек. Бұл процесс ауыр деп саналады және айтарлықтай RAM-ды тұтынады. Playwright сізге бір браузер процесін іске қосып, оның ішінен ондаған оқшауланған контексттерді жасауға мүмкіндік береді – әрбір контекст жаңа браузер терезесі сияқты жұмыс істейді, бірақ бірдей негізгі жадты бөліседі. Нәтижесінде, Playwright жоғары көлемде масштабтаған кезде Puppeteer-ге қарағанда айтарлықтай аз CPU және жадты тұтынады. Құжаттама & қауымдастық қолдауы Puppeteer ұзақ уақыт бойы индустриалдық стандарт болды, бірақ Playwright әзірлеуші құралдары қалай құжатталуы керек деген жаңа стандартты тез белгіледі. Пісіп-жетілген ардагер болып саналатын Puppeteer, бірнеше жылдық артықшылыққа ие, бұл интернетте үлкен білім базасын құруға көмектесті. Мысалы, егер сіз Puppeteer-де кез келген қателік
