Add promise support to selector matchers (#113)

Author: mskelton

src/matchers/toHaveSelector/index.test.ts

@@ -8,6 +8,18 @@ describe("toHaveSelector", () => {
     await page.setContent(`<div id="foobar">Bar</div>`)
     await expect(page).toHaveSelector("#foobar")
   })
+  it("positive in frame", async () => {
+    await page.setContent(`<iframe src="https://example.com"></iframe>`)
+    const selector = "a:text-is('More information...')"
+
+    const handle = page.$("iframe")
+    await expect(handle).toHaveSelector(selector)
+    await expect(await handle).toHaveSelector(selector)
+
+    const frame = (await handle)?.contentFrame()
+    await expect(frame).toHaveSelector(selector)
+    await expect(await frame).toHaveSelector(selector)
+  })
   it("negative", async () => {
     await assertSnapshot(() =>
       expect(page).toHaveSelector("#foobar", { timeout: 1000 })

src/matchers/toHaveSelector/index.ts

@@ -1,13 +1,14 @@
 import { SyncExpectationResult } from "expect/build/types"
-import type { Page } from "playwright-core"
 import { PageWaitForSelectorOptions } from "../../../global"
+import { ExpectInputType, getFrame } from "../utils"
 
 const toHaveSelector: jest.CustomMatcher = async function (
-  page: Page,
+  arg: ExpectInputType,
   selector: string,
   options: PageWaitForSelectorOptions = {}
 ): Promise<SyncExpectationResult> {
-  const pass = await page
+  const frame = await getFrame(arg)
+  const pass = await frame!
     .waitForSelector(selector, {
       state: this.isNot ? "hidden" : "visible",
       ...options,

src/matchers/toHaveSelectorCount/index.test.ts

@@ -11,6 +11,16 @@ describe("toHaveSelectorCount", () => {
       )
       await expect(page).toHaveSelectorCount(".foobar", 2)
     })
+    it("positive in frame", async () => {
+      await page.setContent(`<iframe src="https://example.com"></iframe>`)
+      const handle = page.$("iframe")
+      await expect(handle).toHaveSelectorCount("p", 2)
+      await expect(await handle).toHaveSelectorCount("p", 2)
+
+      const frame = (await handle)?.contentFrame()
+      await expect(frame).toHaveSelectorCount("p", 2)
+      await expect(await frame).toHaveSelectorCount("p", 2)
+    })
     it("negative", async () => {
       await page.setContent(`<div class="foobar">Bar</div>`)
       await assertSnapshot(() => expect(page).toHaveSelectorCount(".foobar", 2))

src/matchers/toHaveSelectorCount/index.ts

@@ -1,18 +1,18 @@
 import { SyncExpectationResult } from "expect/build/types"
-import { getMessage, quote } from "../utils"
-import type { Page } from "playwright-core"
 import { PageWaitForSelectorOptions } from "../../../global"
+import { ExpectInputType, getFrame, getMessage, quote } from "../utils"
 
 const toHaveSelectorCount: jest.CustomMatcher = async function (
-  page: Page,
+  arg: ExpectInputType,
   selector: string,
   expectedValue: number,
   options: PageWaitForSelectorOptions = {}
 ): Promise<SyncExpectationResult> {
   try {
-    await page.waitForSelector(selector, { state: "attached", ...options })
+    const frame = (await getFrame(arg))!
+    await frame.waitForSelector(selector, { state: "attached", ...options })
     /* istanbul ignore next */
-    const actualCount = await page.$$eval(selector, (el) => el.length)
+    const actualCount = await frame.$$eval(selector, (el) => el.length)
 
     return {
       pass: actualCount === expectedValue,