API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a...
Transcript of API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a...
![Page 1: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/1.jpg)
API-driven website testingusing Puppeteer
Viktor Šulák
![Page 2: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/2.jpg)
About me
• Partner at Touch4IT• Backend developer• DevOps engineer• Innovation seeker
![Page 3: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/3.jpg)
• Software and design house with R&D in Bratislava
• Bringing innovations for big companies and startups
• Mobile apps, web applications, AI, AR, VR
• Bratislava, Praha, Vienna, Glasgow
About Touch4IT
![Page 4: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/4.jpg)
• Mobile apps (iOS, Android)• XCTest, JUnit, Espresso
• Web apps (React, Angular)• Jest, Enzyme, Cypress
Testing at Touch4IT
• API backends (Node)• Jest, Newman
• Presentation webs (Drupal)• ?
![Page 5: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/5.jpg)
• Several domains
• Several languages
• Many subpages
• Several critical subpages
Web test scenario #1
![Page 6: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/6.jpg)
Web test scenario #2
• Designers complain
• Lot of resolutions to fit
• Lot of subpages to test
![Page 7: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/7.jpg)
Web test scenario #3
• Complex forms with different scenarios
• Acceptation testing
![Page 8: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/8.jpg)
• Selenium• Cypress• Puppeteer
• Why not Chrome itself?
Available solutions...
![Page 9: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/9.jpg)
• “Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol”• Open source library• Provides well documented API• Created by the creators of Chrome
Puppeteer
https://pptr.dev/
![Page 10: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/10.jpg)
• Generate screenshots and PDFs of pages• Crawl SPAs• Automate form submission, keyboard input, etc.• Capture a timeline trace• Create an automated testing environment• Test Chrome extensions
Puppeteer features
![Page 11: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/11.jpg)
• Puppeteer launches Chromium (optional)• Puppeteer connects to Chrome / Chromium• Script performs testing using Puppeteer
How it works
![Page 12: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/12.jpg)
• Lot of terms from daily web usage• Human readable• No exceptional programming skills needed
Puppeteer syntax
![Page 13: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/13.jpg)
• Require a library
• Launch a new browser
const pptr = require ('puppeteer');
const browser = await pptr.launch ();
Starting browser
![Page 14: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/14.jpg)
• Open a page• Navigate where you want• Mind page loading time• Mind loading events
const page = await browser.newPage ();
await page.goto ('https://www.example.com/1', {timeout: 30000,waitUntil: 'domcontentloaded'
});
Opening page
![Page 15: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/15.jpg)
• Set detailed attributes of viewport• Reload the page to ensure
correct render
await page.setViewport ({width: 375,height: 667,deviceScaleFactor: 2,isMobile: true,hasTouch: true
});
// or
await page.emulate ( devices[ "iPhone 8" ] );
await page.reload ({timeout: 30000,waitUntil: 'domcontentloaded'
});
Specifying resolution
![Page 16: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/16.jpg)
• Screenshot of currently opened page
• Supports .jpg and .png
await page.screenshot ({path: './screenshot.jpg',fullPage: false,type: 'jpeg'
});
Making screenshots
![Page 17: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/17.jpg)
• Elements can by searchedby identifiers (e.g. class or id)• Attributes or content can be
tested
const hostname = page.$eval ('a#test', link => {return link.hostname
});
expect (hostname).toBe ('example.com');
Evaluating element properties
![Page 18: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/18.jpg)
• Detect page loading times• Output file can be parsed• Can be used to detect big
resources or slow assets
await page.tracing.start ({path: 'trace.json'
});
await page.goto ('http://www.example.com');
await page.tracing.stop ();
Timeline tracing
![Page 19: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/19.jpg)
• Pages can be closed separately• Browser closing closes pages
await page.close ();
await browser.close ();
Closing browser
![Page 20: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/20.jpg)
• Sometimes harder to choose method • evaluate, $eval, $$eval
• Big web pages need special care
• 100vh height breaks screenshots
Challenges using Puppeteer
![Page 21: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/21.jpg)
• Driven by Jest, Mocha, etc.
• Navigate to pages - test cases• Assert status code• Assert element attributes and content• Evaluate loading times
Integration with testing suite
![Page 22: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/22.jpg)
• Launched from Gitlab CI
• Tests pass or fail• Generate screenshots• Repopulate render cache
CI Integration
![Page 23: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/23.jpg)
• Navigate to 'touch4it.com'• Check blog is linked to Medium• Navigate to 'touch4it.sk'• Check blog is linked to 'touch4it.sk/blog'
• Check language switcher links
• Make screenshots for designers to check
CI Integration - real-lifeexample
![Page 24: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/24.jpg)
Visual diff - design to screenshot
https://github.com/mapbox/pixelmatch
![Page 25: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/25.jpg)
• Custom higher-level library• Our open-source project on GitHub• Our usually used functionality• Set up for easier screenshotting• Set up for easier elements assessing• Set up to use most popular resolutions
Use Puppeteer easier
https://github.com/touch4it/puppeteer
![Page 26: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/26.jpg)
• Puppetry• Codeless tool to create tests• Tests created in UI or by recording• Uses Jest and Puppeteer• Tests can be exported for CI usage
Use Puppeteer even easier
https://puppetry.app/
![Page 27: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/27.jpg)
Puppetry
![Page 28: API-drivenwebsitetesting usingPuppeteer•“Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevToolsProtocol” •Open source](https://reader033.fdocuments.in/reader033/viewer/2022051811/6026de0ea5eb57025c1a131f/html5/thumbnails/28.jpg)
+ Using recent Chrome to test
+ Lot of well documented features
+ Self-explaining naming
+ Ability to test pages from CI
+ Can attach to your Chrome
- Using recent Chrome to test
- Not a complete testing suite
- Still no other browsers
Pros and cons of Puppeteer