Playwright 1.18 (#26)

* Update to Playwright release candidate

* Add ESLint plugin

* Add a new `hasText` option

* Add changeset

* Cleanup old docs

Author: Mark Skelton

.changeset/purple-parents-taste.md

@@ -0,0 +1,6 @@
+---
+'lariat': minor
+---
+
+Add `hasText` option to `Collection.el()` to filter by text using the `hasText`
+locator option introduced in Playwright 1.18.

.eslintrc

@@ -1,7 +1,11 @@
 {
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:playwright/playwright-test"
+  ],
   "env": {
     "node": true
   }

README.md

@@ -66,6 +66,18 @@ const todoPage = new TodoPage(page)
 await todoPage.saveButton.click()
 ```
 
+### Matching Text Content
+
+Elements can be matched by text content using the `hasText` option. This will
+only return elements that include the specified text or contain a child with the
+specified text.
+
+```ts
+class TodoPage extends Collection<Page> {
+  saveButton = this.el('button', { hasText: 'Save' })
+}
+```
+
 ### Dynamic selectors
 
 Because collections in Lariat are plain JavaScript classes, you can easily

package.json

@@ -29,14 +29,15 @@
     "release": "./scripts/release.sh"
   },
   "dependencies": {
-    "playwright-core": "^1.17.0"
+    "playwright-core": "^1.18.0-rc1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.19.0",
-    "@playwright/test": "^1.17.2",
+    "@playwright/test": "^1.18.0-rc1",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
     "eslint": "^8.6.0",
+    "eslint-plugin-playwright": "^0.7.1",
     "prettier": "^2.5.1",
     "typescript": "^4.5.4"
   }

src/Collection.ts

@@ -3,32 +3,46 @@ import { enhance, NestedCollection } from './enhance'
 import { Handle, isLocator } from './utils'
 
 export interface ElementOptions {
+  /**
+   * When true, the locator will be based off the `frame`, rather than the
+   * `root` thus escaping from any collection nesting. This is useful to
+   * represent a page structure whose visual appearance differs from it's
+   * DOM structure.
+   *
+   * @default false
+   */
   portal?: boolean
+  /**
+   * When defined, creates a frame locator which the element will be nested
+   * inside of.
+   */
   frame?: string
+  /**
+   * Matches elements containing specified text somewhere inside, possibly in a
+   * child or a descendant element.
+   */
+  hasText?: string | RegExp
 }
 
 export class Collection<T extends Handle = Locator> {
   constructor(public root: T) {}
 
   /**
    * Retrieve a locator to a given element on the page identified by the
-   * selector. The locator is lazily initialized when retrieved to ensure that
-   * the most current `root` element is used.
-   *
-   * If `options.portal` is set to true, the locator will be based off the
-   * `frame`, rather than the `root` thus escaping from any collection nesting.
-   * This is useful to represent a page structure whose visual appearance
-   * differs from it's DOM structure.
+   * selector.
    *
    * @param selector - The selector that identifies the element.
    * @param options - Options for how to build the locator.
    */
-  protected el(selector: string, options?: ElementOptions): Locator {
-    const root = options?.portal ? this.frame : this.root
+  protected el(
+    selector: string,
+    { portal, frame, hasText }: ElementOptions = {}
+  ): Locator {
+    const root = portal ? this.frame : this.root
 
-    return options?.frame
-      ? root.frameLocator(options.frame).locator(selector)
-      : root.locator(selector)
+    return frame
+      ? root.frameLocator(frame).locator(selector, { hasText })
+      : root.locator(selector, { hasText })
   }
 
   /**

test/elements.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test'
+import { expect, Page, test } from '@playwright/test'
 import Collection from '../src'
 
 class RootPage extends Collection {
@@ -27,4 +27,14 @@ test.describe('Elements', () => {
     const modalPage = new ModalPage(page.locator('#content'))
     await expect(modalPage.modal).toHaveText('Hi')
   })
+
+  test('locates elements with specific text', async ({ page }) => {
+    class TodoPage extends Collection<Page> {
+      button = this.el('button', { hasText: 'Ho' })
+    }
+
+    await page.setContent('<button>Hi</button><button>Ho</button>')
+    const todoPage = new TodoPage(page)
+    await expect(todoPage.button).toHaveText('Ho')
+  })
 })