feat(adb): support webviews (#4657)

Author: pavelfeldman

android-types-internal.d.ts

@@ -14,6 +14,52 @@
  * limitations under the License.
  */
 
+import { EventEmitter } from 'events';
+
+export interface AndroidDevice<BrowserContextOptions, BrowserContext, Page> extends EventEmitter {
+  input: AndroidInput;
+
+  setDefaultTimeout(timeout: number): void;
+  on(event: 'webview', handler: (webView: AndroidWebView<Page>) => void): this;
+  waitForEvent(event: string, predicate?: (data: any) => boolean): Promise<any>;
+
+  serial(): string;
+  model(): string;
+  webViews(): AndroidWebView<Page>[];
+  shell(command: string): Promise<string>;
+  launchBrowser(options?: BrowserContextOptions & { packageName?: string  }): Promise<BrowserContext>;
+  close(): Promise<void>;
+
+  wait(selector: AndroidSelector, options?: { state?: 'gone' } & { timeout?: number }): Promise<void>;
+  fill(selector: AndroidSelector, text: string, options?: { timeout?: number }): Promise<void>;
+  press(selector: AndroidSelector, key: AndroidKey, options?: { duration?: number } & { timeout?: number }): Promise<void>;
+  tap(selector: AndroidSelector, options?: { duration?: number } & { timeout?: number }): Promise<void>;
+  drag(selector: AndroidSelector, dest: { x: number, y: number }, options?: { speed?: number } & { timeout?: number }): Promise<void>;
+  fling(selector: AndroidSelector, direction: 'down' | 'up' | 'left' | 'right', options?: { speed?: number } & { timeout?: number }): Promise<void>;
+  longTap(selector: AndroidSelector, options?: { timeout?: number }): Promise<void>;
+  pinchClose(selector: AndroidSelector, percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
+  pinchOpen(selector: AndroidSelector, percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
+  scroll(selector: AndroidSelector,  direction: 'down' | 'up' | 'left' | 'right', percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
+  swipe(selector: AndroidSelector, direction: 'down' | 'up' | 'left' | 'right', percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
+
+  info(selector: AndroidSelector): Promise<AndroidElementInfo>;
+}
+
+export interface AndroidInput {
+  type(text: string): Promise<void>;
+  press(key: AndroidKey): Promise<void>;
+  tap(point: { x: number, y: number }): Promise<void>;
+  swipe(from: { x: number, y: number }, segments: { x: number, y: number }[], steps: number): Promise<void>;
+  drag(from: { x: number, y: number }, to: { x: number, y: number }, steps: number): Promise<void>;
+}
+
+export interface AndroidWebView<Page> extends EventEmitter {
+  on(event: 'close', handler: () => void): this;
+  pid(): number;
+  pkg(): string;
+  page(): Promise<Page>;
+}
+
 export type AndroidElementInfo = {
   clazz: string;
   desc: string;
@@ -52,37 +98,6 @@ export type AndroidSelector = {
   text?: string | RegExp,
 };
 
-export interface AndroidDevice<BrowserContextOptions, BrowserContext> {
-  input: AndroidInput;
-
-  serial(): string;
-  model(): string;
-  shell(command: string): Promise<string>;
-  launchBrowser(options?: BrowserContextOptions & { packageName?: string  }): Promise<BrowserContext>;
-  close(): Promise<void>;
-
-  wait(selector: AndroidSelector, options?: { state?: 'gone' } & { timeout?: number }): Promise<void>;
-  fill(selector: AndroidSelector, text: string, options?: { timeout?: number }): Promise<void>;
-  tap(selector: AndroidSelector, options?: { duration?: number } & { timeout?: number }): Promise<void>;
-  drag(selector: AndroidSelector, dest: { x: number, y: number }, options?: { speed?: number } & { timeout?: number }): Promise<void>;
-  fling(selector: AndroidSelector, direction: 'down' | 'up' | 'left' | 'right', options?: { speed?: number } & { timeout?: number }): Promise<void>;
-  longTap(selector: AndroidSelector, options?: { timeout?: number }): Promise<void>;
-  pinchClose(selector: AndroidSelector, percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
-  pinchOpen(selector: AndroidSelector, percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
-  scroll(selector: AndroidSelector,  direction: 'down' | 'up' | 'left' | 'right', percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
-  swipe(selector: AndroidSelector, direction: 'down' | 'up' | 'left' | 'right', percent: number, options?: { speed?: number } & { timeout?: number }): Promise<void>;
-
-  info(selector: AndroidSelector): Promise<AndroidElementInfo>;
-}
-
-export interface AndroidInput {
-  type(text: string): Promise<void>;
-  press(key: AndroidKey): Promise<void>;
-  tap(point: { x: number, y: number }): Promise<void>;
-  swipe(from: { x: number, y: number }, segments: { x: number, y: number }[], steps: number): Promise<void>;
-  drag(from: { x: number, y: number }, to: { x: number, y: number }, steps: number): Promise<void>;
-}
-
 export type AndroidKey =
   'Unknown' |
   'SoftLeft' | 'SoftRight' |

android-types.d.ts

@@ -14,8 +14,15 @@
  * limitations under the License.
  */
 
-import { BrowserContext, BrowserContextOptions } from './types/types';
+import { Page, BrowserContext, BrowserContextOptions } from './types/types';
 import * as apiInternal from './android-types-internal';
+import { EventEmitter } from 'events';
 
-export * from './android-types-internal';
-export type AndroidDevice  = apiInternal.AndroidDevice<BrowserContext, BrowserContextOptions>;
+export { AndroidElementInfo, AndroidSelector } from './android-types-internal';
+export type AndroidDevice  = apiInternal.AndroidDevice<BrowserContextOptions, BrowserContext, Page>;
+export type AndroidWebView  = apiInternal.AndroidWebView<Page>;
+
+export interface Android extends EventEmitter {
+  setDefaultTimeout(timeout: number): void;
+  devices(): Promise<AndroidDevice[]>;
+}

packages/build_package.js

@@ -28,7 +28,7 @@ const cpAsync = util.promisify(ncp);
 const SCRIPT_NAME = path.basename(__filename);
 const ROOT_PATH = path.join(__dirname, '..');
 
-const PLAYWRIGHT_CORE_FILES = ['bin', 'lib', 'types', 'NOTICE', 'LICENSE'];
+const PLAYWRIGHT_CORE_FILES = ['bin/PrintDeps.exe', 'lib', 'types', 'NOTICE', 'LICENSE'];
 const FFMPEG_FILES = ['third_party/ffmpeg'];
 
 const PACKAGES = {
@@ -65,10 +65,10 @@ const PACKAGES = {
     files: [...PLAYWRIGHT_CORE_FILES, ...FFMPEG_FILES, 'electron-types.d.ts'],
   },
   'playwright-android': {
-    version: '0.0.2', // Manually manage playwright-android version.
+    version: '0.0.7', // Manually manage playwright-android version.
     description: 'A high-level API to automate Chrome for Android',
     browsers: [],
-    files: [...PLAYWRIGHT_CORE_FILES, ...FFMPEG_FILES, 'android-types.d.ts', 'bin/android-driver.apk', 'bin/android-driver-target.apk'],
+    files: [...PLAYWRIGHT_CORE_FILES, ...FFMPEG_FILES, 'android-types.d.ts', 'android-types-internal.d.ts', 'bin/android-driver.apk', 'bin/android-driver-target.apk'],
   },
 };
 

packages/common/.npmignore

@@ -18,6 +18,9 @@ lib/server/injected/
 # Include generated types and entrypoint.
 !types/*
 !index.d.ts
+# Include separate android types.
+!android-types.d.ts
+!android-types-internal.d.ts
 # Include separate electron types.
 !electron-types.d.ts
 # Include main entrypoint.

packages/playwright-android/README.md

@@ -15,28 +15,32 @@ const { android } = require('playwright-android');
 
 (async () => {
   const [device] = await android.devices();
-
-  // Android automation.
   console.log(`Model: ${device.model()}`);
   console.log(`Serial: ${device.serial()}`);
 
-  await device.tap({ desc: 'Home' });
-  console.log(await device.info({ text: 'Chrome' }));
-  await device.tap({ text: 'Chrome' });
-  await device.fill({ res: 'com.android.chrome:id/url_bar' }, 'www.chromium.org');
-  await device.input.press('Enter');
-  await new Promise(f => setTimeout(f, 1000));
-
-  await device.tap({ res: 'com.android.chrome:id/tab_switcher_button' });
-  await device.tap({ desc: 'More options' });
-  await device.tap({ desc: 'Close all tabs' });
-
-  // Browser automation.
-  const context = await device.launchBrowser();
-  const [page] = context.pages();
-  await page.goto('https://webkit.org/');
-  console.log(await page.evaluate(() => window.location.href));
-  await context.close();
+  await device.shell('am force-stop org.chromium.webview_shell');
+  await device.shell('am start org.chromium.webview_shell/.WebViewBrowserActivity');
+
+  await device.fill({ res: 'org.chromium.webview_shell:id/url_field' }, 'github.com/microsoft/playwright');
+
+  let [webview] = device.webViews();
+  if (!webview)
+    webview = await device.waitForEvent('webview');
+
+  const page = await webview.page();
+  await Promise.all([
+    page.waitForNavigation(),
+    device.press({ res: 'org.chromium.webview_shell:id/url_field' }, 'Enter')
+  ]);
+  console.log(await page.title());
+
+  {
+    const context = await device.launchBrowser();
+    const [page] = context.pages();
+    await page.goto('https://webkit.org/');
+    console.log(await page.evaluate(() => window.location.href));
+    await context.close();
+  }
 
   await device.close();
 })();

src/client/android.ts

@@ -15,21 +15,34 @@
  */
 
 import * as channels from '../protocol/channels';
+import { Events } from './events';
 import { BrowserContext, validateBrowserContextOptions } from './browserContext';
 import { ChannelOwner } from './channelOwner';
 import * as apiInternal from '../../android-types-internal';
 import * as types from './types';
+import { Page } from './page';
+import { TimeoutSettings } from '../utils/timeoutSettings';
+import { Waiter } from './waiter';
+import { EventEmitter } from 'events';
 
 type Direction =  'down' | 'up' | 'left' | 'right';
 type SpeedOptions = { speed?: number };
 
 export class Android extends ChannelOwner<channels.AndroidChannel, channels.AndroidInitializer> {
+  readonly _timeoutSettings: TimeoutSettings;
+
   static from(android: channels.AndroidChannel): Android {
     return (android as any)._object;
   }
 
   constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.AndroidInitializer) {
     super(parent, type, guid, initializer);
+    this._timeoutSettings = new TimeoutSettings();
+  }
+
+  setDefaultTimeout(timeout: number) {
+    this._timeoutSettings.setDefaultTimeout(timeout);
+    this._channel.setDefaultTimeoutNoReply({ timeout });
   }
 
   async devices(): Promise<AndroidDevice[]> {
@@ -41,6 +54,9 @@ export class Android extends ChannelOwner<channels.AndroidChannel, channels.Andr
 }
 
 export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, channels.AndroidDeviceInitializer> {
+  readonly _timeoutSettings: TimeoutSettings;
+  private _webViews = new Map<number, AndroidWebView>();
+
   static from(androidDevice: channels.AndroidDeviceChannel): AndroidDevice {
     return (androidDevice as any)._object;
   }
@@ -50,6 +66,27 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
   constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.AndroidDeviceInitializer) {
     super(parent, type, guid, initializer);
     this.input = new Input(this);
+    this._timeoutSettings = new TimeoutSettings((parent as Android)._timeoutSettings);
+    this._channel.on('webViewAdded', ({ webView }) => this._onWebViewAdded(webView));
+    this._channel.on('webViewRemoved', ({ pid }) => this._onWebViewRemoved(pid));
+  }
+
+  private _onWebViewAdded(webView: channels.AndroidWebView) {
+    const view = new AndroidWebView(this, webView);
+    this._webViews.set(webView.pid, view);
+    this.emit(Events.AndroidDevice.WebView, view);
+  }
+
+  private _onWebViewRemoved(pid: number) {
+    const view = this._webViews.get(pid);
+    this._webViews.delete(pid);
+    if (view)
+      view.emit(Events.AndroidWebView.Close);
+  }
+
+  setDefaultTimeout(timeout: number) {
+    this._timeoutSettings.setDefaultTimeout(timeout);
+    this._channel.setDefaultTimeoutNoReply({ timeout });
   }
 
   serial(): string {
@@ -60,6 +97,10 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
     return this._initializer.model;
   }
 
+  webViews(): AndroidWebView[] {
+    return [...this._webViews.values()];
+  }
+
   async wait(selector: apiInternal.AndroidSelector, options?: { state?: 'gone' } & types.TimeoutOptions) {
     await this._wrapApiCall('androidDevice.wait', async () => {
       await this._channel.wait({ selector: toSelectorChannel(selector), ...options });
@@ -72,6 +113,11 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
     });
   }
 
+  async press(selector: apiInternal.AndroidSelector, key: apiInternal.AndroidKey, options?: types.TimeoutOptions) {
+    await this.tap(selector, options);
+    await this.input.press(key);
+  }
+
   async tap(selector: apiInternal.AndroidSelector, options?: { duration?: number } & types.TimeoutOptions) {
     await this._wrapApiCall('androidDevice.tap', async () => {
       await this._channel.tap({ selector: toSelectorChannel(selector), ...options });
@@ -129,6 +175,7 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
   async close() {
     return this._wrapApiCall('androidDevice.close', async () => {
       await this._channel.close();
+      this.emit(Events.AndroidDevice.Close);
     });
   }
 
@@ -146,6 +193,18 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
       return BrowserContext.from(context);
     });
   }
+
+  async waitForEvent(event: string, optionsOrPredicate: types.WaitForEventOptions = {}): Promise<any> {
+    const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
+    const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
+    const waiter = new Waiter();
+    waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
+    if (event !== Events.AndroidDevice.Close)
+      waiter.rejectOnEvent(this, Events.AndroidDevice.Close, new Error('Device closed'));
+    const result = await waiter.waitForEvent(this, event, predicate as any);
+    waiter.dispose();
+    return result;
+  }
 }
 
 class Input implements apiInternal.AndroidInput {
@@ -235,3 +294,36 @@ function toSelectorChannel(selector: apiInternal.AndroidSelector): channels.Andr
     selected,
   };
 }
+
+export class AndroidWebView extends EventEmitter {
+  private _device: AndroidDevice;
+  private _data: channels.AndroidWebView;
+  private _pagePromise: Promise<Page> | undefined;
+
+  constructor(device: AndroidDevice, data: channels.AndroidWebView) {
+    super();
+    this._device = device;
+    this._data = data;
+  }
+
+  pid(): number {
+    return this._data.pid;
+  }
+
+  pkg(): string {
+    return this._data.pkg;
+  }
+
+  async page(): Promise<Page> {
+    if (!this._pagePromise)
+      this._pagePromise = this._fetchPage();
+    return this._pagePromise;
+  }
+
+  private async _fetchPage(): Promise<Page> {
+    return this._device._wrapApiCall('androidWebView.page', async () => {
+      const { context } = await this._device._channel.connectToWebView({ pid: this._data.pid });
+      return BrowserContext.from(context).pages()[0];
+    });
+  }
+}

src/client/events.ts

@@ -16,6 +16,15 @@
  */
 
 export const Events = {
+  AndroidDevice: {
+    WebView: 'webview',
+    Close: 'close'
+  },
+
+  AndroidWebView: {
+    Close: 'close'
+  },
+
   Browser: {
     Disconnected: 'disconnected'
   },