refactor: refactor page.evaluate to page.$eval / $$eval where applicable

1. basics/get_list_of_links.js

@@ -12,10 +12,7 @@ const puppeteer = require('puppeteer');
   await page.goto('https://news.ycombinator.com/news')
 
   // execute standard javascript in the context of the page.
-  const stories = await page.evaluate(() => {
-    const anchors = Array.from(document.querySelectorAll('a.storylink'))
-    return anchors.map(anchor => anchor.textContent).slice(0, 10)
-  })
+  const stories = await page.$$eval('a.storylink', anchors => { return anchors.map(anchor => anchor.textContent).slice(0, 10) })
   console.log(stories)
   await page.tracing.stop();
   await browser.close()

1. basics/get_text_value.js

@@ -1,7 +1,7 @@
 /**
  * @name get text value of an element
  *
- * @desc Gets the text value of an element by using the page.evaluate method
+ * @desc Gets the text value of an element by using the page.$eval method
  *
  */
 const puppeteer = require('puppeteer');

2. search/booking.js

@@ -14,8 +14,7 @@ try {
     await page.click('.sb-searchbox__button')
     await page.waitForSelector('#hotellist_inner')
     await page.screenshot({ path: screenshot })
-    const hotels = await page.evaluate(() => {
-      const anchors = Array.from(document.querySelectorAll('span.sr-hotel__name'))
+    const hotels = await page.$$eval('span.sr-hotel__name', anchors => {
       return anchors.map(anchor => anchor.textContent.trim()).slice(0, 10)
     })
     console.log(hotels)

a. mocha-tests/duck_duck_go.js

@@ -15,14 +15,14 @@ before(async () => {
 })
 
 describe('Duck Duck Go Search', () => {
-  it('returns Chrome Puppeteer Github repo as first search result"', async () => {
+  it('returns Chrome Puppeteer Github repo as first search result', async () => {
 
     await page.goto('https://duckduckgo.com/', { waitUntil: 'networkidle2' })
     await page.type('input#search_form_input_homepage', 'chrome puppeteer', { delay: 50 })
     await page.click('input#search_button_homepage')
     await page.waitForSelector('.results--main #r1-0')
 
-    const githubLink = await page.evaluate(() => document.querySelector('a.result__a').textContent.trim())
+    const githubLink = await page.$eval('a.result__a', link => { return link.textContent.trim() })
     assert(githubLink, 'https://github.com/GoogleChrome/puppeteer')
     await page.screenshot({ path: 'duckduckgo.png' })
   }).timeout(10000)

a. mocha-tests/etsy.js

@@ -33,7 +33,7 @@ describe('Etsy shopping cart', () => {
   it('adds the product to the cart', async () => {
     await page.click('button.btn-buy-box')
     await page.waitForSelector('h1.item-count')
-    const quantity = await page.evaluate(() => document.querySelector('h1.item-count').textContent.trim())
+    const quantity = await page.$eval('h1.item-count', counter => { return counter.textContent.trim() })
     assert.equal(quantity, '1 item in your cart')
   }).timeout(10000)
 })

a. mocha-tests/google.js

@@ -20,15 +20,12 @@ describe('Check Google Homepage', () => {
     assert.equal(title, 'Google')
   }).timeout(10000)
 
-  it('First search result is my link', async () => {
+  it('Third search result is my link', async () => {
     await page.type('input[name=q]', 'puppeteer', { delay: 100 })
     await page.click('input[type="submit"]')
     await page.waitForSelector('h3 a')
-    const links = await page.evaluate(() => {
-      return Array.from(document.querySelectorAll('h3 a'))
-        .map(a => { return a.textContent })
-    })
-    assert.equal('This will fail...', links[0])
+    const links = await page.$$eval('h3 a', anchors => { return anchors.map(a => { return a.textContent }) })
+    assert.equal('This will fail...', links[2])
   }).timeout(10000)
 })
 

a. mocha-tests/staples.js

@@ -17,18 +17,18 @@ describe('Staples shopping cart', () => {
   it('shows the painting category', async () => {
     await page.setViewport({ width: 1280, height: 800 })
     await page.goto('https://www.staples.com/Painting-Supplies/cat_CL140420/bww15', { waitUntil: 'networkidle2' })
-    const category = await page.evaluate(() => document.querySelector('h1').textContent.trim())
+    const category = await page.$eval('h1', txt => txt.textContent.trim())
     assert.equal(category, 'Painting')
   }).timeout(20000)
 
   it('adds the product to the cart', async () => {
     await page.click('button.add-to-cart-btn.addToCart')
     await page.waitForSelector('h4.cart-items-header')
-    const quantity = await page.evaluate(() => document.querySelector('span.cart-count-msg').textContent.trim())
+    const quantity = await page.$eval('span.cart-count-msg', txt => txt.textContent.trim())
     assert.equal(quantity, '1')
   }).timeout(10000)
 })
 
 after(async () => {
-  await browser.close()
+ await browser.close()
 })

b. jest-tests/etsy.spec.js

@@ -32,7 +32,7 @@ describe('Etsy shopping cart', () => {
   test('adds the product to the cart', async () => {
     await page.click('button.btn-buy-box')
     await page.waitForSelector('h1.item-count')
-    const quantity = await page.evaluate(() => document.querySelector('h1.item-count').textContent.trim())
+    const quantity = await page.$eval('h1.item-count', counter => { return counter.textContent.trim() })
     expect(quantity).toBe('1 item in your cart')
   }, 10000)
 

b. jest-tests/walmart.spec.js

@@ -17,14 +17,14 @@ describe('Walmart shopping cart', () => {
   test('shows the correct product', async () => {
     await page.setViewport({ width: 1280, height: 800 })
     await page.goto('https://www.walmart.com/ip/Super-Mario-Odyssey-Nintendo-Switch/56011600', { waitUntil: 'networkidle2' })
-    const productTitle = await page.evaluate(() => document.querySelector('h1.prod-ProductTitle').textContent)
-    expect(productTitle).toBe('Super Mario Odyssey (Nintendo Switch)')
+    const productTitle = await page.$eval('h1.prod-ProductTitle', txt => txt.textContent)
+    expect(productTitle).toBe('Super Mario Odyssey, Nintendo, Nintendo Switch, 045496590741')
   }, 20000)
 
   test('adds the product to the cart', async () => {
     await page.click('button.prod-ProductCTA--primary')
-    await page.waitForSelector('.Cart-PACModal-ItemInfoContainer')
-    const quantity = await page.evaluate(() => document.querySelector('a.OrderSummary-SubTotal-itemCountLink').textContent)
+    await page.waitForSelector('.copy-mini.pos-item-qty')
+    const quantity = await page.$eval('.copy-mini.pos-item-qty', txt => txt.textContent)
     expect(quantity).toBe('(1 item)')
   }, 10000)
 

package.json

@@ -16,7 +16,7 @@
     "type": "git",
     "url": "git+https://github.com/checkly/puppeteer-examples.git"
   },
-  "author": "",
+  "author": "Tim Nolet",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/checkly/puppeteer-examples/issues"