feat: bumped to Playwright 0.13.1 (#18)

.github/workflows/nodejs.yml

@@ -21,11 +21,9 @@ jobs:
     - run: npm ci
     - name: Lint
       run: |
-        yarn run tsc --noEmit src/**/*.ts
+        yarn run tsc --noEmit
     - run: npm run build
     - run: npm test
-      env:
-        CI: true
     - run: npx codecov
       env:
         CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

global.d.ts

@@ -1,4 +1,15 @@
-import { PageWaitForSelectorOptions } from "playwright-core";
+// copied into our codebase for autocompletion purposes
+interface PageWaitForSelectorOptions {
+  /**
+   * Wait for element to become visible (`visible`), hidden (`hidden`), present in dom (`attached`) or not present in dom (`detached`). Defaults to `attached`.
+   */
+  waitFor?: "attached" | "detached" | "visible" | "hidden";
+
+  /**
+   * Maximum time in milliseconds, defaults to 30 seconds, pass `0` to disable timeout. The default value can be changed by using the browserContext.setDefaultTimeout(timeout) or page.setDefaultTimeout(timeout) methods.
+   */
+  timeout?: number;
+}
 
 export interface PlaywrightMatchers<R> {
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expect-playwright",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "lib/index.js",
   "types": "./global.d.ts",
   "repository": "https://github.com/mxschmitt/expect-playwright.git",
@@ -12,13 +12,13 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.4",
-    "@types/node": "^13.9.8",
-    "jest": "^25.2.4",
-    "jest-playwright-preset": "^0.1.1",
-    "playwright-chromium": "^0.12.1",
-    "playwright-core": "^0.12.1",
-    "ts-jest": "^25.3.0",
+    "@types/jest": "^25.2.1",
+    "@types/node": "^13.11.1",
+    "jest": "^25.3.0",
+    "jest-playwright-preset": "^0.1.2",
+    "playwright-chromium": "^0.13.0",
+    "playwright-core": "^0.13.0",
+    "ts-jest": "^25.4.0",
     "typescript": "^3.8.3"
   }
 }

src/matchers/toEqualText/index.test.ts

@@ -22,7 +22,7 @@ describe("toEqualText", () => {
       expect(testWrapper(await toEqualText(page, "#foobar", "not-existing"))).toThrowErrorMatchingSnapshot()
     })
     describe("timeout", () => {
-      it("positive: should have a timeout of 1 second per default", async () => {
+      it("positive: should be able to use a custom timeout", async () => {
         setTimeout(async () => {
           await page.evaluate(() => {
             document.write(`<div id="foobar">Bar</div>`)
@@ -32,7 +32,9 @@ describe("toEqualText", () => {
       })
       it("should throw an error after the timeout exceeds", async () => {
         const start = new Date().getTime()
-        expect(testWrapper(await toEqualText(page, "#foobar", "Bar"))).toThrowErrorMatchingSnapshot()
+        expect(testWrapper(await toEqualText(page, "#foobar", "Bar", {
+          timeout: 1 * 1000
+        }))).toThrowErrorMatchingSnapshot()
         const duration = new Date().getTime() - start
         expect(duration).toBeLessThan(1500)
       })

src/matchers/toEqualText/index.ts

@@ -5,7 +5,7 @@ const toEqualText = async (...args: InputArguments): Promise<SyncExpectationResu
   try {
     const { elementHandle, selector, expectedValue } = await getElementText(...args)
     /* istanbul ignore next */
-    const actualTextContent = await elementHandle.evaluate((el) => el.textContent)
+    const actualTextContent = await elementHandle.evaluate<string | null>((el) => el.textContent)
     if (actualTextContent === expectedValue) {
       return {
         pass: true,

src/matchers/toEqualValue/index.test.ts

@@ -43,7 +43,9 @@ describe("toEqualValue", () => {
   describe("timeout", () => {
     it("should throw an error after the timeout exceeds", async () => {
       const start = new Date().getTime()
-      expect(testWrapper(await toEqualValue(page, "#foobar", "bar"))).toThrowErrorMatchingSnapshot()
+      expect(testWrapper(await toEqualValue(page, "#foobar", "bar", {
+        timeout: 1 * 1000
+      }))).toThrowErrorMatchingSnapshot()
       const duration = new Date().getTime() - start
       expect(duration).toBeLessThan(1500)
     })

src/matchers/toHaveSelector/index.test.ts

@@ -15,20 +15,26 @@ describe("toHaveSelector", () => {
     expect(result.message()).toMatchSnapshot()
   })
   it("negative", async () => {
-    expect(testWrapper(await toHaveSelector(page, "#foobar"))).toThrowError()
+    expect(testWrapper(await toHaveSelector(page, "#foobar", {
+      timeout: 1 * 1000
+    }))).toThrowError()
   })
   describe("timeout", () => {
-    it("positive: should have a timeout of 1 second per default", async () => {
+    it("positive: should be able to use a custom timeout", async () => {
       setTimeout(async () => {
         await page.evaluate(() => {
           document.write(`<div id="foobar">Bar</div>`)
         })
       }, 500)
-      expect(testWrapper(await toHaveSelector(page, "#foobar"))).toBe(true)
+      expect(testWrapper(await toHaveSelector(page, "#foobar", {
+        timeout: 1 * 1000
+      }))).toBe(true)
     })
     it("should throw an error after the timeout exceeds", async () => {
       const start = new Date().getTime()
-      expect(testWrapper(await toHaveSelector(page, "#foobar"))).toThrowError()
+      expect(testWrapper(await toHaveSelector(page, "#foobar", {
+        timeout: 1 * 1000
+      }))).toThrowError()
       const duration = new Date().getTime() - start
       expect(duration).toBeLessThan(1500)
     })

src/matchers/toHaveSelector/index.ts

@@ -1,10 +1,10 @@
 import { SyncExpectationResult } from 'expect/build/types'
-import { quote, getDefaultWaitForSelectorOptions } from '../utils'
-import { Page, PageWaitForSelectorOptions } from 'playwright-core'
+import { quote } from '../utils'
+import { Page } from 'playwright-core'
+import { PageWaitForSelectorOptions } from '../../../global'
 
-const toHaveSelector = async (page: Page, selector: string, _options?: PageWaitForSelectorOptions): Promise<SyncExpectationResult> => {
+const toHaveSelector = async (page: Page, selector: string, options: PageWaitForSelectorOptions = {}): Promise<SyncExpectationResult> => {
   try {
-    const options = getDefaultWaitForSelectorOptions(_options)
     await page.waitForSelector(selector, options)
     return {
       pass: true,

src/matchers/toHaveText/index.test.ts

@@ -57,7 +57,9 @@ describe("toHaveText", () => {
   describe("timeout", () => {
     it("should throw an error after the timeout exceeds", async () => {
       const start = new Date().getTime()
-      expect(testWrapper(await toHaveText(page, "#foobar", "bar"))).toThrowErrorMatchingSnapshot()
+      expect(testWrapper(await toHaveText(page, "#foobar", "bar", {
+        timeout: 1 * 1000
+      }))).toThrowErrorMatchingSnapshot()
       const duration = new Date().getTime() - start
       expect(duration).toBeLessThan(1500)
     })

src/matchers/utils.test.ts

@@ -1,4 +1,4 @@
-import { getElementText, InputArguments} from './utils'
+import { getElementText } from './utils'
 
 describe("utils.getElementText", () => {
   it("should throw an error if the specified expect element was not recognized", async () => {

src/matchers/utils.ts

@@ -1,11 +1,12 @@
-import type { Page, HTMLOrSVGElementHandle, PageWaitForSelectorOptions, WaitForSelectorOptionsNotHidden } from "playwright-core"
+import type { Page, ElementHandle } from "playwright-core"
+import { PageWaitForSelectorOptions } from "../../global"
 
 const ExpectTypePage = "Page"
 const ExpectTypeElementHandle = "ElementHandle"
 
 type ExpectType = typeof ExpectTypePage | typeof ExpectTypeElementHandle
 
-export type ExpectInputType = Page | HTMLOrSVGElementHandle
+export type ExpectInputType = Page | ElementHandle
 
 export const detectExpectType = (value: ExpectInputType): ExpectType => {
   const className = value.constructor.name
@@ -20,17 +21,14 @@ export const detectExpectType = (value: ExpectInputType): ExpectType => {
 }
 
 interface getElementTextReturn {
-  elementHandle: HTMLOrSVGElementHandle
+  elementHandle: ElementHandle
   selector?: string
   expectedValue: string
 }
 
-export type InputArguments = [Page | HTMLOrSVGElementHandle, string?, (string | PageWaitForSelectorOptions)?, PageWaitForSelectorOptions?]
+export type InputArguments = [Page | ElementHandle, string?, (string | PageWaitForSelectorOptions)?, PageWaitForSelectorOptions?]
 
-export const getDefaultWaitForSelectorOptions = (options: PageWaitForSelectorOptions = {}): PageWaitForSelectorOptions => ({
-  timeout: 1 * 1000,
-  ...options
-})
+const lastElementHasType = (args: InputArguments, type: "string" | "object"): boolean => typeof args[args.length - 1] === type
 
 export const getElementText = async (...args: InputArguments): Promise<getElementTextReturn> => {
   /**
@@ -42,31 +40,30 @@ export const getElementText = async (...args: InputArguments): Promise<getElemen
     const type = detectExpectType(args[0])
     if (type === ExpectTypeElementHandle) {
       return {
-        elementHandle: args[0] as HTMLOrSVGElementHandle,
+        elementHandle: args[0] as ElementHandle,
         expectedValue: args[1] as string
       }
     }
     const page = args[0] as Page
     return {
-      elementHandle: await page.$("body") as HTMLOrSVGElementHandle,
+      elementHandle: await page.$("body") as ElementHandle,
       expectedValue: args[1] as string
     }
   }
   /**
    * Handle the following case:
    * - expect(page).foo("#foo", "bar")
    */
-  if (args.length === 3) {
+  if (args.length === 3 && lastElementHasType(args, "string") || args.length === 4 && lastElementHasType(args, "object")) {
     const selector = args[1] as string
     const page = args[0] as Page
-    const options = getDefaultWaitForSelectorOptions(args[3] as WaitForSelectorOptionsNotHidden)
     try {
-      await page.waitForSelector(selector, options)
+      await page.waitForSelector(selector, args[3] as PageWaitForSelectorOptions)
     } catch (err) {
       throw new Error(`Timeout exceed for element ${quote(selector)}`)
     }
     return {
-      elementHandle: await page.$(selector) as HTMLOrSVGElementHandle,
+      elementHandle: await page.$(selector) as ElementHandle,
       expectedValue: args[2] as string,
       selector
     }