@web/test-runner-commands 0.6.4 → 0.6.5

package/browser/commands.mjs

@@ -69,6 +69,10 @@ export function sendKeys(options) {
   return executeServerCommand('send-keys', options);
 }
 
+export function selectOption(options) {
+  return executeServerCommand('select-option', options);
+}
+
 export function sendMouse(options) {
   return executeServerCommand('send-mouse', options);
 }

package/dist/selectOptionPlugin.d.ts

@@ -0,0 +1,17 @@
+import { TestRunnerPlugin } from '@web/test-runner-core';
+declare type SelectByValuePayload = {
+    selector: string;
+    value: string;
+};
+declare type SelectByLabelPayload = {
+    selector: string;
+    label: string;
+};
+declare type SelectMultipleValuesPayload = {
+    selector: string;
+    values: string[];
+};
+export declare type SelectOptionPayload = SelectByLabelPayload | SelectByValuePayload | SelectMultipleValuesPayload;
+export declare function selectOptionPlugin(): TestRunnerPlugin<SelectOptionPayload>;
+export {};
+//# sourceMappingURL=selectOptionPlugin.d.ts.map

package/dist/selectOptionPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectOptionPlugin.d.ts","sourceRoot":"","sources":["../src/selectOptionPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIzD,aAAK,oBAAoB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAChE,aAAK,oBAAoB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAChE,aAAK,2BAA2B,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE1E,oBAAY,mBAAmB,GAC3B,oBAAoB,GACpB,oBAAoB,GACpB,2BAA2B,CAAC;AA8ChC,wBAAgB,kBAAkB,IAAI,gBAAgB,CAAC,mBAAmB,CAAC,CAgE1E"}

package/dist/selectOptionPlugin.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectOptionPlugin = void 0;
+function isObject(payload) {
+    return payload != null && typeof payload === 'object';
+}
+function isSelectOptionPayload(payload) {
+    const validOptions = ['value', 'label', 'values'];
+    if (!isObject(payload))
+        throw new Error('You must provide a `SelectOptionPayload` object');
+    if (!payload.selector || typeof payload.selector !== 'string') {
+        throw new Error(`You must provide a selector representing the select you wish to locate`);
+    }
+    const numberOfValidOptions = Object.keys(payload).filter(key => validOptions.includes(key)).length;
+    const unknownOptions = Object.keys(payload).filter(key => ![...validOptions, 'selector'].includes(key));
+    if (numberOfValidOptions === 0)
+        throw new Error(`You must provide one of the following properties to pass to the browser runner: ${validOptions.join(', ')}.`);
+    if (unknownOptions.length > 0) {
+        throw new Error('Unknown options `' + unknownOptions.join(', ') + '` present.');
+    }
+    return true;
+}
+function isValuePayload(payload) {
+    return 'selector' in payload && 'value' in payload;
+}
+function isLabelPayload(payload) {
+    return 'selector' in payload && 'label' in payload;
+}
+function isMultiplePayload(payload) {
+    return 'selector' in payload && 'values' in payload;
+}
+function selectOptionPlugin() {
+    return {
+        name: 'select-option-command',
+        async executeCommand({ command, payload, session }) {
+            if (command === 'select-option') {
+                if (!isSelectOptionPayload(payload) || !payload) {
+                    throw new Error('You must provide a `SelectOptionPayload` object');
+                }
+                // handle specific behavior for playwright
+                if (session.browser.type === 'playwright') {
+                    const page = session.browser.getPage(session.id);
+                    if (isValuePayload(payload)) {
+                        const { selector, value } = payload;
+                        await page.locator(selector).selectOption(value);
+                        return true;
+                    }
+                    else if (isLabelPayload(payload)) {
+                        const { selector, label } = payload;
+                        await page.locator(selector).selectOption({ label });
+                        return true;
+                    }
+                    else if (isMultiplePayload(payload)) {
+                        const { selector, values } = payload;
+                        await page.locator(selector).selectOption([...values]);
+                        return true;
+                    }
+                }
+                // handle specific behavior for puppeteer
+                if (session.browser.type === 'puppeteer') {
+                    const page = session.browser.getPage(session.id);
+                    if (isValuePayload(payload)) {
+                        const { selector, value } = payload;
+                        await page.select(selector, value);
+                        return true;
+                    }
+                    else if (isMultiplePayload(payload)) {
+                        const { selector, values } = payload;
+                        await page.select(selector, ...values);
+                        return true;
+                    }
+                    else {
+                        throw new Error(`Puppeteer only supports selection of an option by its value(s):
+            https://pptr.dev/next/api/puppeteer.page.select#parameters
+            `);
+                    }
+                }
+                // handle specific behavior for webdriver
+                if (session.browser.type === 'webdriver') {
+                    throw new Error(`Selecting an option via a browser driver command is not currently implemented in WebDriver yet.
+            https://www.selenium.dev/documentation/webdriver/elements/select_lists/
+            
+            When using WebDriver, the current recommended (September 2022) approach is to:
+            - locate your select element (via querySelector or querySelectorAll)
+            - focus the element
+            - use sendKeys() to type the label of the option you wish to select
+            - use select.dispatchEvent(new Event('change')) to trigger a change event on the select.
+            `);
+                }
+                // you might not be able to support all browser launchers
+                throw new Error(`Selection of select element options is not supported for browser type ${session.browser.type}.`);
+            }
+        },
+    };
+}
+exports.selectOptionPlugin = selectOptionPlugin;
+//# sourceMappingURL=selectOptionPlugin.js.map

package/dist/selectOptionPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectOptionPlugin.js","sourceRoot":"","sources":["../src/selectOptionPlugin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web/test-runner-commands",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "publishConfig": {
     "access": "public"
   },

package/src/selectOptionPlugin.ts

@@ -0,0 +1,122 @@
+import { TestRunnerPlugin } from '@web/test-runner-core';
+import type { ChromeLauncher } from '@web/test-runner-chrome';
+import type { PlaywrightLauncher } from '@web/test-runner-playwright';
+
+type SelectByValuePayload = { selector: string; value: string };
+type SelectByLabelPayload = { selector: string; label: string };
+type SelectMultipleValuesPayload = { selector: string; values: string[] };
+
+export type SelectOptionPayload =
+  | SelectByLabelPayload
+  | SelectByValuePayload
+  | SelectMultipleValuesPayload;
+
+function isObject(payload: unknown): payload is Record<string, unknown> {
+  return payload != null && typeof payload === 'object';
+}
+
+function isSelectOptionPayload(payload: unknown): boolean {
+  const validOptions = ['value', 'label', 'values'];
+
+  if (!isObject(payload)) throw new Error('You must provide a `SelectOptionPayload` object');
+
+  if (!payload.selector || typeof payload.selector !== 'string') {
+    throw new Error(`You must provide a selector representing the select you wish to locate`);
+  }
+
+  const numberOfValidOptions = Object.keys(payload).filter(key =>
+    validOptions.includes(key),
+  ).length;
+  const unknownOptions = Object.keys(payload).filter(
+    key => ![...validOptions, 'selector'].includes(key),
+  );
+
+  if (numberOfValidOptions === 0)
+    throw new Error(
+      `You must provide one of the following properties to pass to the browser runner: ${validOptions.join(
+        ', ',
+      )}.`,
+    );
+  if (unknownOptions.length > 0) {
+    throw new Error('Unknown options `' + unknownOptions.join(', ') + '` present.');
+  }
+  return true;
+}
+
+function isValuePayload(payload: SelectOptionPayload): payload is SelectByValuePayload {
+  return 'selector' in payload && 'value' in payload;
+}
+
+function isLabelPayload(payload: SelectOptionPayload): payload is SelectByLabelPayload {
+  return 'selector' in payload && 'label' in payload;
+}
+
+function isMultiplePayload(payload: SelectOptionPayload): payload is SelectMultipleValuesPayload {
+  return 'selector' in payload && 'values' in payload;
+}
+
+export function selectOptionPlugin(): TestRunnerPlugin<SelectOptionPayload> {
+  return {
+    name: 'select-option-command',
+    async executeCommand({ command, payload, session }): Promise<any> {
+      if (command === 'select-option') {
+        if (!isSelectOptionPayload(payload) || !payload) {
+          throw new Error('You must provide a `SelectOptionPayload` object');
+        }
+        // handle specific behavior for playwright
+        if (session.browser.type === 'playwright') {
+          const page = (session.browser as PlaywrightLauncher).getPage(session.id);
+          if (isValuePayload(payload)) {
+            const { selector, value } = payload;
+            await page.locator(selector).selectOption(value);
+            return true;
+          } else if (isLabelPayload(payload)) {
+            const { selector, label } = payload;
+            await page.locator(selector).selectOption({ label });
+            return true;
+          } else if (isMultiplePayload(payload)) {
+            const { selector, values } = payload;
+            await page.locator(selector).selectOption([...values]);
+            return true;
+          }
+        }
+
+        // handle specific behavior for puppeteer
+        if (session.browser.type === 'puppeteer') {
+          const page = (session.browser as ChromeLauncher).getPage(session.id);
+          if (isValuePayload(payload)) {
+            const { selector, value } = payload;
+            await page.select(selector, value);
+            return true;
+          } else if (isMultiplePayload(payload)) {
+            const { selector, values } = payload;
+            await page.select(selector, ...values);
+            return true;
+          } else {
+            throw new Error(`Puppeteer only supports selection of an option by its value(s):
+            https://pptr.dev/next/api/puppeteer.page.select#parameters
+            `);
+          }
+        }
+
+        // handle specific behavior for webdriver
+        if (session.browser.type === 'webdriver') {
+          throw new Error(`Selecting an option via a browser driver command is not currently implemented in WebDriver yet.
+            https://www.selenium.dev/documentation/webdriver/elements/select_lists/
+            
+            When using WebDriver, the current recommended (September 2022) approach is to:
+            - locate your select element (via querySelector or querySelectorAll)
+            - focus the element
+            - use sendKeys() to type the label of the option you wish to select
+            - use select.dispatchEvent(new Event('change')) to trigger a change event on the select.
+            `);
+        }
+
+        // you might not be able to support all browser launchers
+        throw new Error(
+          `Selection of select element options is not supported for browser type ${session.browser.type}.`,
+        );
+      }
+    },
+  };
+}