Introduction to Puppeteer

Introduction to using Puppeteer in conjunction with Dev Tools such as Coverage tool.

Transcript

1. Intro to Puppeteer Tam Mullen @tammullen
3. Coverage Tool
4. Coverage Tool
6. “
7. • Finding Dead Code • Identifying code for Lazy Loading Coverage Tool Uses
8. CDP
9. “
15. Puppeteer Use Examples
16. let loginPage = new Login(page); await loginPage.enterUsername(); await loginPage.enterPassword(); constructor(page) { this.page = page; this.username = '#usernameOrEmail'; this.usernameSubmit = '#wp-submit, button[type="submit"]'; this.password = '#password'; this.loginSubmit = '#wp-submit, button[type="submit"]'; this.readerHome = '.following.main'; this.mySitesLink = '[data-tip-target=my-sites]'; } async enterUsername() { await this.page.type(this.username, config.testUserName); await this.page.click(this.usernameSubmit); } async enterPassword() { await this.page.waitForSelector(this.password, { visible: true }); await this.page.type(this.password, config.testPassword); }
17. page.coverage.startJSCoverage({ resetOnNavigation: false }) page.coverage.startCSSCoverage({ resetOnNavigation: false }) page.coverage.stopJSCoverage() page.coverage.stopCSSCoverage()
21. $ npm run start -- -v Clearing previous traces... Starting browser... Logging in... Starting measurements for section reader... Timing initial visit to new-post... Initial time: 187.634ms Timing repeat visits to new-post... Mean time: 1336.41ms Timing initial visit to likes... Initial time: 654.691ms Timing repeat visits to likes... Mean time: 687.038ms Timing initial visit to search...
23. Thanks Tam Mullen @tammullen