refactor: modify library integration to work with Playwright API

Author: jrolfs

lib/extend.ts

@@ -1,7 +1,5 @@
-import {ElementHandle} from 'puppeteer'
-
 import {getDocument, getQueriesForElement} from '.'
-import {IScopedQueryUtils} from './typedefs'
+import {ElementHandle, IScopedQueryUtils} from './typedefs'
 
 // tslint:disable-next-line
 let Page, ElementHandle
@@ -13,26 +11,10 @@ function requireOrUndefined(path: string): any {
 }
 
 try {
-  Page = require('puppeteer/lib/Page.js') // tslint:disable-line
+  Page = require('playwright-core/lib/page.js') // tslint:disable-line
   if (Page.Page) Page = Page.Page
 
-  ElementHandle = requireOrUndefined('puppeteer/lib/ElementHandle.js') // tslint:disable-line variable-name
-  if (ElementHandle && ElementHandle.ElementHandle) ElementHandle = ElementHandle.ElementHandle
-
-  if (!ElementHandle) {
-    const ExecutionContext = requireOrUndefined('puppeteer/lib/ExecutionContext.js') // tslint:disable-line variable-name
-    if (ExecutionContext && ExecutionContext.ElementHandle) {
-      ElementHandle = ExecutionContext.ElementHandle
-    }
-  }
-  if (ElementHandle && ElementHandle.ElementHandle) ElementHandle = ElementHandle.ElementHandle
-
-  if (!ElementHandle) {
-    const JSHandle = require('puppeteer/lib/JSHandle.js') // tslint:disable-line
-    if (JSHandle && JSHandle.ElementHandle) {
-      ElementHandle = JSHandle.ElementHandle
-    }
-  }
+  ElementHandle = requireOrUndefined('playwright-core/lib/api.js') // tslint:disable-line variable-name
   if (ElementHandle && ElementHandle.ElementHandle) ElementHandle = ElementHandle.ElementHandle
 
   Page.prototype.getDocument = getDocument
@@ -45,12 +27,12 @@ try {
   }
 } catch (err) {
   // tslint:disable-next-line
-  console.error('Could not augment puppeteer functions, do you have a conflicting version?')
+  console.error('Could not augment playwright functions, do you have a conflicting version?')
   throw err
 }
 
 /* tslint:disable */
-declare module 'puppeteer' {
+declare module 'playwright-core/types/types' {
   interface Page {
     getDocument(): Promise<ElementHandle>
   }

lib/index.ts

@@ -1,9 +1,9 @@
 import {readFileSync} from 'fs'
 import * as path from 'path'
-import {ElementHandle, EvaluateFn, JSHandle, Page} from 'puppeteer'
+import {JSHandle, Page} from 'playwright'
 import waitForExpect from 'wait-for-expect'
 
-import {IQueryUtils, IScopedQueryUtils} from './typedefs'
+import {ElementHandle, IQueryUtils, IScopedQueryUtils} from './typedefs'
 
 const domLibraryAsString = readFileSync(
   path.join(__dirname, '../dom-testing-library.js'),
@@ -33,7 +33,7 @@ type ContextFn = (...args: any[]) => ElementHandle
 
 async function createElementHandleArray(handle: JSHandle): Promise<ElementHandle[]> {
   const lengthHandle = await handle.getProperty('length')
-  const length = await lengthHandle.jsonValue() as number
+  const length = (await lengthHandle.jsonValue()) as number
 
   const elements: ElementHandle[] = []
   for (let i = 0; i < length; i++) {
@@ -57,18 +57,14 @@ async function covertToElementHandle(handle: JSHandle, asArray: boolean): Promis
 }
 
 function processNodeText(handles: IHandleSet): Promise<string> {
-  return handles.containerHandle
-    .executionContext()
-    .evaluate(handles.evaluateFn, handles.containerHandle, 'getNodeText')
+  return handles.containerHandle.evaluate(handles.evaluateFn, ['getNodeText'])
 }
 
 async function processQuery(handles: IHandleSet): Promise<DOMReturnType> {
   const {containerHandle, evaluateFn, fnName, argsToForward} = handles
 
   try {
-    const handle = await containerHandle
-      .executionContext()
-      .evaluateHandle(evaluateFn, containerHandle, fnName, ...argsToForward)
+    const handle = await containerHandle.evaluateHandle(evaluateFn, [fnName, ...argsToForward])
     return await covertToElementHandle(handle, fnName.includes('All'))
   } catch (err) {
     err.message = err.message.replace('[fnName]', `[${fnName}]`)
@@ -79,7 +75,10 @@ async function processQuery(handles: IHandleSet): Promise<DOMReturnType> {
 
 interface IHandleSet {
   containerHandle: ElementHandle
-  evaluateFn: EvaluateFn
+  // FIXME: Playwright doesn't expose a type for this like Puppeteer does with
+  // `EvaluateFn`. This *should* be something like the `PageFunction` type that
+  // is unfortunately not exported from the Playwright modules.
+  evaluateFn: any
   fnName: string
   argsToForward: any[]
 }
@@ -97,11 +96,9 @@ function createDelegateFor<T = DOMReturnType>(
   return async function(...args: any[]): Promise<T> {
     // @ts-ignore
     const containerHandle: ElementHandle = contextFn ? contextFn.apply(this, args) : this
+
     // @ts-ignore
-    const evaluateFn: EvaluateFn = new Function(
-      'container, fnName, ...args',
-      delegateFnBodyToExecuteInPage,
-    )
+    const evaluateFn = new Function('container, [fnName, ...args]', delegateFnBodyToExecuteInPage)
 
     // Convert RegExp to a special format since they don't serialize well
     let argsToForward = args.map(arg => (arg instanceof RegExp ? convertRegExp(arg) : arg))

lib/typedefs.ts

@@ -1,5 +1,7 @@
 import {Matcher, MatcherOptions, SelectorMatcherOptions} from '@testing-library/dom'
-import {ElementHandle} from 'puppeteer'
+import {ElementHandle as PlaywrightElementHandle} from 'playwright'
+
+export type ElementHandle = PlaywrightElementHandle<SVGElement | HTMLElement>
 
 type Element = ElementHandle
 

test/__snapshots__/extend.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`lib/extend.ts should handle the LabelText methods 1`] = `"<input id=\\"label-text-input\\" type=\\"text\\">"`;
 
 exports[`lib/extend.ts should handle the get* method failures 1`] = `
-"Evaluation failed: Error: Unable to find an element with the title: missing.
+"Evaluation failed: TestingLibraryElementError: Unable to find an element with the title: missing.
 
 <div
   id=\\"scoped\\"

test/extend.test.ts

@@ -1,22 +1,22 @@
 import * as path from 'path'
-import * as puppeteer from 'puppeteer'
+import * as playwright from 'playwright'
 
 describe('lib/extend.ts', () => {
-  let browser: puppeteer.Browser
-  let page: puppeteer.Page
-  let document: puppeteer.ElementHandle
+  let browser: playwright.ChromiumBrowser
+  let page: playwright.Page
+  let document: playwright.ElementHandle
 
   it('should require without error', async () => {
     await import('../lib/extend')
   })
 
-  it('should launch puppeteer', async () => {
-    browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
+  it('should launch playwright', async () => {
+    browser = await playwright.chromium.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
     page = await browser.newPage()
     await page.goto(`file://${path.join(__dirname, 'fixtures/page.html')}`)
   })
 
-  it('should extend puppeteer ElementHandle', async () => {
+  it('should extend playwright ElementHandle', async () => {
     document = await page.getDocument()
     expect(typeof document.queryAllByAltText).toBe('function')
   })
@@ -25,21 +25,21 @@ describe('lib/extend.ts', () => {
     const element = await document.queryByText('Hello h1')
     expect(element).toBeTruthy()
     /* istanbul ignore next */
-    expect(await page.evaluate(el => el.textContent, element)).toEqual('Hello h1')
+    expect(await page.evaluate(el => el?.textContent, element)).toEqual('Hello h1')
   })
 
   it('should use the new v3 methods', async () => {
     const element = await document.queryByRole('presentation')
     expect(element).toBeTruthy()
     /* istanbul ignore next */
-    expect(await page.evaluate(el => el.textContent, element)).toContain('Layout table')
+    expect(await page.evaluate(el => el?.textContent, element)).toContain('Layout table')
   })
 
   it('should handle regex matching', async () => {
     const element = await document.queryByText(/HeLlO h(1|7)/i)
     expect(element).toBeTruthy()
     /* istanbul ignore next */
-    expect(await page.evaluate(el => el.textContent, element)).toEqual('Hello h1')
+    expect(await page.evaluate(el => el?.textContent, element)).toEqual('Hello h1')
   })
 
   it('should handle the get* methods', async () => {
@@ -56,9 +56,7 @@ describe('lib/extend.ts', () => {
       await scope!.getByTitle('missing')
       fail()
     } catch (err) {
-      err.message = err.message
-        .replace(/(\s*at .*(\n|$))+/gm, '\n    <stack>:X:X')
-        .replace('TestingLibraryElementError', 'Error') // Puppeteer 1.7 returns a generic error
+      err.message = err.message.replace(/(\s*at .*(\n|$))+/gm, '\n    <stack>:X:X')
       expect(err.message).toMatchSnapshot()
     }
   })
@@ -86,7 +84,7 @@ describe('lib/extend.ts', () => {
     const scope = await document.$('#scoped')
     const element = await scope!.queryByText(/Hello/)
     /* istanbul ignore next */
-    expect(await page.evaluate(el => el.textContent, element)).toEqual('Hello h3')
+    expect(await page.evaluate(el => el?.textContent, element)).toEqual('Hello h3')
   })
 
   it('should get text content', async () => {

test/index.test.ts

@@ -1,13 +1,13 @@
 import * as path from 'path'
-import * as puppeteer from 'puppeteer'
+import * as playwright from 'playwright'
 import {getDocument, queries, getQueriesForElement, wait} from '../lib'
 
 describe('lib/index.ts', () => {
-  let browser: puppeteer.Browser
-  let page: puppeteer.Page
+  let browser: playwright.Browser
+  let page: playwright.Page
 
-  it('should launch puppeteer', async () => {
-    browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
+  it('should launch playwright', async () => {
+    browser = await playwright.chromium.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
     page = await browser.newPage()
     await page.goto(`file://${path.join(__dirname, 'fixtures/page.html')}`)
   })