@serenity-js/playwright 3.0.0-rc.20

package/src/screenplay/models/locators/PlaywrightLocator.ts

@@ -0,0 +1,113 @@
+import { f, LogicError } from '@serenity-js/core';
+import { ByCss, ByCssContainingText, ByDeepCss, ById, ByTagName, ByXPath, Locator, PageElement, RootLocator, Selector } from '@serenity-js/web';
+import * as playwright from 'playwright';
+
+import { PlaywrightPageElement } from '../PlaywrightPageElement';
+import { PlaywrightRootLocator } from './PlaywrightRootLocator';
+
+export class PlaywrightLocator extends Locator<playwright.ElementHandle, string> {
+
+    constructor(
+        parent: RootLocator<playwright.ElementHandle>,
+        selector: Selector,
+    ) {
+        super(parent, selector);
+    }
+
+    // todo: refactor; replace with a map and some more generic lookup mechanism
+    protected nativeSelector(): string {
+        if (this.selector instanceof ByCss) {
+            return `:light(${ this.selector.value })`;
+        }
+
+        if (this.selector instanceof ByDeepCss) {
+            return this.selector.value;
+        }
+
+        if (this.selector instanceof ByCssContainingText) {
+            return `:light(${ this.selector.value }):has-text("${ this.selector.text }")`;
+        }
+
+        if (this.selector instanceof ById) {
+            return `id=${ this.selector.value }`;
+        }
+
+        if (this.selector instanceof ByTagName) {
+            return `:light(${ this.selector.value })`;
+        }
+
+        if (this.selector instanceof ByXPath) {
+            return `xpath=${ this.selector.value }`;
+        }
+
+        throw new LogicError(f`${ this.selector } is not supported by ${ this.constructor.name }`);
+    }
+
+    async nativeElement(): Promise<playwright.ElementHandle> {
+
+        const parent = await this.parent.nativeElement();
+
+        if (! parent) {
+            throw new LogicError(`Couldn't find parent element ${ this.parent } of ${ this }`);
+        }
+
+        return parent.waitForSelector(this.nativeSelector(), { state: 'attached' });
+    }
+
+    async allNativeElements(): Promise<Array<playwright.ElementHandle>> {
+        const parent = await this.parent.nativeElement();
+
+        if (! parent) {
+            return;
+        }
+
+        return parent.$$(this.nativeSelector());
+    }
+
+    of(parent: PlaywrightRootLocator): Locator<playwright.ElementHandle, string> {
+        return new PlaywrightLocator(parent, this.selector);
+    }
+
+    locate(child: PlaywrightLocator): Locator<playwright.ElementHandle, string> {
+        return new PlaywrightLocator(this, child.selector);
+    }
+
+    element(): PageElement<playwright.ElementHandle> {
+        return new PlaywrightPageElement(this);
+    }
+
+    async allElements(): Promise<Array<PageElement<playwright.ElementHandle>>> {
+        const elements = await this.allNativeElements();
+
+        return elements.map(childElement =>
+            new PlaywrightPageElement(
+                new ExistingElementLocator(
+                    this.parent as PlaywrightRootLocator,
+                    this.selector,
+                    childElement,
+                )
+            )
+        );
+    }
+}
+
+/**
+ * @private
+ */
+class ExistingElementLocator extends PlaywrightLocator {
+    constructor(
+        parent: RootLocator<playwright.ElementHandle>,
+        selector: Selector,
+        private readonly existingNativeElement: playwright.ElementHandle,
+    ) {
+        super(parent, selector);
+    }
+
+    async nativeElement(): Promise<playwright.ElementHandle> {
+        return this.existingNativeElement;
+    }
+
+    async allNativeElements(): Promise<Array<playwright.ElementHandle>> {
+        return [ this.existingNativeElement ];
+    }
+}

package/src/screenplay/models/locators/PlaywrightRootLocator.ts

@@ -0,0 +1,29 @@
+import { RootLocator } from '@serenity-js/web';
+import * as playwright from 'playwright';
+import { ensure, isDefined } from 'tiny-types';
+
+export class PlaywrightRootLocator extends RootLocator<playwright.ElementHandle> {
+
+    private currentFrame: playwright.Frame;
+
+    constructor(private readonly page: playwright.Page) {
+        super();
+        this.currentFrame = this.page.mainFrame();
+    }
+
+    async nativeElement(): Promise<Pick<playwright.ElementHandle, '$' | '$$' | 'waitForSelector'>> {
+        return this.currentFrame;
+    }
+
+    async switchToFrame(frame: playwright.ElementHandle): Promise<void> {
+        this.currentFrame = ensure('frame', await frame.contentFrame(), isDefined());
+    }
+
+    async switchToParentFrame(): Promise<void> {
+        this.currentFrame = ensure('parent frame', this.currentFrame.parentFrame(), isDefined());
+    }
+
+    async switchToMainFrame(): Promise<void> {
+        this.currentFrame = this.page.mainFrame();
+    }
+}

package/src/screenplay/models/locators/index.ts

@@ -0,0 +1,2 @@
+export * from './PlaywrightLocator';
+export * from './PlaywrightRootLocator';

package/tsconfig.eslint.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig",
+  "include": [
+    "src/**/*.ts",
+    "spec/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}