feat: adding playwright webview support with getByWebView() locator

e2e/package.json

@@ -5,8 +5,8 @@
   "description": "End-to-end tests for mobilewright drivers",
   "type": "module",
   "scripts": {
-    "test:mobilecli": "MOBILEWRIGHT_DRIVER=mobilecli npx mobilewright test",
-    "test:mobilenext": "MOBILEWRIGHT_DRIVER=mobilenext npx mobilewright test"
+    "test:mobilecli": "MOBILEWRIGHT_DRIVER=mobilecli node ../packages/mobilewright/dist/cli.js test",
+    "test:mobilenext": "MOBILEWRIGHT_DRIVER=mobilenext node ../packages/mobilewright/dist/cli.js test"
   },
   "dependencies": {
     "mobilewright": "^0.0.1",

e2e/src/conformance/actions.test.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage, pageWithBody } from './harness.js';
+
+test('actions affect the DOM like Playwright', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(pageWithBody(`
+    <button id="b" onclick="this.textContent='clicked'">press me</button>
+    <input id="fill" type="text">
+    <input id="type" type="text">
+    <input id="key" type="text" onkeydown="this.value='key:'+event.key">
+    <input id="focusable" type="text">
+    <div id="hovered">idle</div>
+    <button id="hover" onmouseover="document.getElementById('hovered').textContent='hovered'">hover me</button>
+    <div style="height:2000px"></div>
+    <button id="bottom">bottom</button>
+  `));
+
+  // click
+  await page.locator('#b').click();
+  await expect(page.locator('#b')).toHaveText('clicked');
+
+  // fill
+  await page.locator('#fill').fill('hello@example.com');
+  await expect(page.locator('#fill')).toHaveValue('hello@example.com');
+
+  // type (appends)
+  await page.locator('#type').type('abc');
+  await expect(page.locator('#type')).toHaveValue('abc');
+
+  // press
+  await page.locator('#key').press('Enter');
+  await expect(page.locator('#key')).toHaveValue('key:Enter');
+
+  // focus
+  await page.locator('#focusable').focus();
+  await expect(page.locator('#focusable')).toBeFocused();
+
+  // hover
+  await page.locator('#hover').hover();
+  await expect(page.locator('#hovered')).toHaveText('hovered');
+
+  // scrollIntoViewIfNeeded — no throw, element becomes in viewport
+  await page.locator('#bottom').scrollIntoViewIfNeeded();
+  await expect(page.locator('#bottom')).toBeInViewport();
+});

e2e/src/conformance/assertions-state.test.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage, pageWithBody } from './harness.js';
+
+test('state assertions match Playwright', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(pageWithBody(`
+    <div id="visible">shown</div>
+    <div id="hidden" style="display:none">gone</div>
+    <button id="enabled">ok</button>
+    <button id="disabled" disabled>no</button>
+    <input id="editable" type="text">
+    <input id="readonly" type="text" readonly>
+    <input id="checkbox" type="checkbox" checked>
+    <input id="empty" type="text" value="">
+  `));
+
+  await expect(page.locator('#visible')).toBeVisible();
+  await expect(page.locator('#hidden')).not.toBeVisible();
+  await expect(page.locator('#hidden')).toBeHidden();
+  await expect(page.locator('#visible')).not.toBeHidden();
+
+  await expect(page.locator('#enabled')).toBeEnabled();
+  await expect(page.locator('#disabled')).toBeDisabled();
+  await expect(page.locator('#disabled')).not.toBeEnabled();
+
+  await expect(page.locator('#editable')).toBeEditable();
+  await expect(page.locator('#readonly')).not.toBeEditable();
+
+  await expect(page.locator('#checkbox')).toBeChecked();
+
+  await expect(page.locator('#visible')).toBeAttached();
+  await expect(page.locator('#missing')).not.toBeAttached();
+
+  await expect(page.locator('#empty')).toBeEmpty();
+  await expect(page.locator('#visible')).not.toBeEmpty();
+
+  await expect(page.locator('#visible')).toBeInViewport();
+});

e2e/src/conformance/assertions-text.test.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage, pageWithBody } from './harness.js';
+
+test('text assertions match Playwright (incl. whitespace normalization)', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(pageWithBody(`
+    <p id="text">  Hello   world  </p>
+    <input id="value" type="text" value="john@example.com">
+  `));
+
+  // Playwright normalizes whitespace for STRING matches (so the multi-space,
+  // padded text equals 'Hello world')...
+  await expect(page.locator('#text')).toHaveText('Hello world');
+  await expect(page.locator('#text')).not.toHaveText('Goodbye');
+  // ...but NOT for REGEX matches — a regex is tested against the raw text, so it
+  // must account for the actual whitespace.
+  await expect(page.locator('#text')).toHaveText(/Hello\s+world/);
+  await expect(page.locator('#text')).not.toHaveText(/Hello world/);
+
+  // toContainText substring
+  await expect(page.locator('#text')).toContainText('world');
+  await expect(page.locator('#text')).not.toContainText('planet');
+
+  // toHaveValue exact + regex + negative
+  await expect(page.locator('#value')).toHaveValue('john@example.com');
+  await expect(page.locator('#value')).toHaveValue(/@example\.com$/);
+  await expect(page.locator('#value')).not.toHaveValue('other');
+});

e2e/src/conformance/assertions-web.test.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage, pageWithBody } from './harness.js';
+
+test('web-only assertions match Playwright', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(pageWithBody(`
+    <ul><li class="item">a</li><li class="item">b</li></ul>
+    <button id="btn" class="btn primary" data-variant="primary" style="color: rgb(255, 0, 0);">go</button>
+    <input id="check" type="checkbox" checked>
+  `));
+
+  // count
+  await expect(page.locator('.item')).toHaveCount(2);
+  await expect(page.locator('.item')).not.toHaveCount(3);
+
+  // attribute (exact + regex + negative)
+  await expect(page.locator('#btn')).toHaveAttribute('data-variant', 'primary');
+  await expect(page.locator('#btn')).toHaveAttribute('class', /primary/);
+  await expect(page.locator('#btn')).not.toHaveAttribute('data-variant', 'secondary');
+
+  // class (full token list) + contain (subset)
+  await expect(page.locator('#btn')).toHaveClass('btn primary');
+  await expect(page.locator('#btn')).toContainClass('primary');
+  await expect(page.locator('#btn')).not.toContainClass('danger');
+
+  // css
+  await expect(page.locator('#btn')).toHaveCSS('color', 'rgb(255, 0, 0)');
+
+  // id
+  await expect(page.locator('#btn')).toHaveId('btn');
+
+  // JS property
+  await expect(page.locator('#check')).toHaveJSProperty('checked', true);
+});

e2e/src/conformance/harness.ts

@@ -0,0 +1,21 @@
+import type { Device, Screen, Page } from 'mobilewright';
+
+const PLAYGROUND_APP = 'com.mobilenext.playground';
+
+// Launch the Playground app, open its WebView screen, and return the web Page.
+// All conformance tests start from the Page this returns.
+export async function openWebviewPage(ctx: { device: Device; screen: Screen }): Promise<Page> {
+  await ctx.device.terminateApp(PLAYGROUND_APP).catch(() => {});
+  await ctx.device.launchApp(PLAYGROUND_APP);
+  const webviewButton = ctx.screen.getByText('Web View');
+  await webviewButton.tap();
+  const page = await ctx.screen.getByWebView().page();
+  return page;
+}
+
+// Wrap a readable HTML body fragment into a self-contained data: URL document.
+// Tests author legible HTML; the data-URL encoding stays hidden behind the name.
+export function pageWithBody(bodyHtml: string): string {
+  const doc = `<!doctype html><meta charset="utf-8"><body>${bodyHtml}</body>`;
+  return `data:text/html,${encodeURIComponent(doc)}`;
+}

e2e/src/conformance/locators.test.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage, pageWithBody } from './harness.js';
+
+test('locator factories resolve like Playwright', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(pageWithBody(`
+    <button>Sign in</button>
+    <a href="#">Sign in</a>
+    <label>Email <input type="text" placeholder="you@example.com" data-testid="email"></label>
+    <img alt="Company logo" src="x">
+    <span title="Close dialog">x</span>
+    <p class="greeting">Hello   world</p>
+    <ul><li>one</li><li>two</li><li>three</li></ul>
+  `));
+
+  // getByRole with accessible name, exact, and regex
+  await expect(page.getByRole('button', { name: 'Sign in' })).toHaveCount(1);
+  await expect(page.getByRole('button', { name: 'sign', exact: false })).toHaveCount(1);
+  await expect(page.getByRole('button', { name: /sign/i })).toHaveCount(1);
+  await expect(page.getByRole('link', { name: 'Sign in' })).toHaveCount(1);
+
+  // getByText exact vs substring vs regex
+  await expect(page.getByText('Hello world')).toHaveCount(1);
+  await expect(page.getByText('Hello', { exact: false })).toHaveCount(1);
+  await expect(page.getByText(/hello/i)).toHaveCount(1);
+
+  // label / placeholder / testid / alt / title
+  await expect(page.getByLabel('Email')).toHaveCount(1);
+  await expect(page.getByPlaceholder('you@example.com')).toHaveCount(1);
+  await expect(page.getByTestId('email')).toHaveCount(1);
+  await expect(page.getByAltText('Company logo')).toHaveCount(1);
+  await expect(page.getByTitle('Close dialog')).toHaveCount(1);
+
+  // raw css, count, nth/first/last, chaining
+  await expect(page.locator('li')).toHaveCount(3);
+  await expect(page.locator('li').first()).toHaveText('one');
+  await expect(page.locator('li').nth(1)).toHaveText('two');
+  await expect(page.locator('li').last()).toHaveText('three');
+  await expect(page.locator('ul').getByText('two')).toHaveCount(1);
+});

e2e/src/conformance/real-navigation.test.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@mobilewright/test';
+import { openWebviewPage } from './harness.js';
+
+// A real, cross-origin HTTPS page (not a data: URL) so this exercises an actual
+// network navigation plus engine re-injection on the fresh document. It covers
+// the subset of the web API that stays stable against a live site; the
+// deterministic matcher matrix lives in the other conformance files.
+const PYTHAGOREAN_ARTICLE = 'https://en.wikipedia.org/wiki/Pythagorean_theorem';
+
+test('navigates to a live page and drives it like Playwright', async ({ device, screen }) => {
+  const page = await openWebviewPage({ device, screen });
+
+  await page.goto(PYTHAGOREAN_ARTICLE);
+  await page.waitForLoadState('domcontentloaded');
+
+  // Page-level state reflects the real navigation.
+  await expect(page).toHaveURL(/Pythagorean_theorem/);
+  await expect(page).toHaveTitle(/Pythagorean theorem/);
+
+  // The article heading resolves by id and by accessible role+name.
+  await expect(page.locator('#firstHeading')).toContainText('Pythagorean theorem');
+  await expect(page.getByRole('heading', { name: /Pythagorean theorem/ }).first()).toBeVisible();
+
+  // A real article has many links; assert a lower bound rather than an exact
+  // count, which would drift as the page is edited.
+  const linkCount = await page.getByRole('link').count();
+  expect(linkCount).toBeGreaterThan(50);
+  await expect(page.getByRole('link').first()).toBeVisible();
+
+  // Scroll the last link (near the page bottom) into view and confirm it lands
+  // in the viewport — a skin-independent target on a long article.
+  const lastLink = page.getByRole('link').last();
+  await lastLink.scrollIntoViewIfNeeded();
+  await expect(lastLink).toBeInViewport();
+});

e2e/src/webview-injected-click.test.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@mobilewright/test';
+
+// Set to a webview-capable app installed on the target device.
+const APP_ID = 'com.example.webviewdemo';
+
+test('clicks a real webview button via the injected Playwright engine', async ({ device, screen }) => {
+  await device.launchApp(APP_ID);
+
+  const page = await screen.getByWebView().page();
+
+  // Self-contained fixture: clicking the button mutates document.title, which
+  // we read back to confirm the click actually fired in the real webview.
+  await page.goto('data:text/html,<button onclick="document.title=\'clicked\'">Sign in</button>');
+
+  await page.getByRole('button', { name: 'Sign in' }).click();
+
+  const title = await page.title();
+  expect(title).toBe('clicked');
+});

package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@mobilewright/test": "*",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "1.58.2",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/node": "^22.19.15",
     "@typescript-eslint/eslint-plugin": "^8.59.3",

packages/driver-mobilecli/package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@mobilewright/protocol": "^0.0.1",
     "debug": "^4.4.3",
-    "mobilecli": "0.3.75",
+    "mobilecli": "0.3.78",
     "ws": "^8.18.0"
   },
   "devDependencies": {