From e1d31964609af2002317b832545438f3383db587 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Thu, 12 Mar 2020 21:30:12 -0700 Subject: [PATCH] api(*.selectOption): renamed from *.select (#1371) --- docs/api.md | 38 +++++++++++++++++----------------- src/dom.ts | 2 +- src/frames.ts | 4 ++-- src/page.ts | 4 ++-- test/page.spec.js | 52 +++++++++++++++++++++++------------------------ 5 files changed, 50 insertions(+), 50 deletions(-) diff --git a/docs/api.md b/docs/api.md index 277d9870f492b..e9723225e1fbf 100644 --- a/docs/api.md +++ b/docs/api.md @@ -674,7 +674,7 @@ page.removeListener('request', logRequest); - [page.reload([options])](#pagereloadoptions) - [page.route(url, handler)](#pagerouteurl-handler) - [page.screenshot([options])](#pagescreenshotoptions) -- [page.select(selector, values[, options])](#pageselectselector-values-options) +- [page.selectOption(selector, values[, options])](#pageselectoptionselector-values-options) - [page.setContent(html[, options])](#pagesetcontenthtml-options) - [page.setDefaultNavigationTimeout(timeout)](#pagesetdefaultnavigationtimeouttimeout) - [page.setDefaultTimeout(timeout)](#pagesetdefaulttimeouttimeout) @@ -1473,7 +1473,7 @@ Page routes take precedence over browser context routes (set up with [browserCon > **NOTE** Screenshots take at least 1/6 second on Chromium OS X and Chromium Windows. See https://crbug.com/741689 for discussion. -#### page.select(selector, values[, options]) +#### page.selectOption(selector, values[, options]) - `selector` <[string]> A selector to query frame for. - `values` <[string]|[ElementHandle]|[Object]|[Array]<[string]>|[Array]<[ElementHandle]>|[Array]<[Object]>> Options to select. If the `` element matching `selector`, the method throws an error ```js // single selection matching the value -page.select('select#colors', 'blue'); +page.selectOption('select#colors', 'blue'); // single selection matching both the value and the label -page.select('select#colors', { value: 'blue', label: 'Blue' }); +page.selectOption('select#colors', { value: 'blue', label: 'Blue' }); // multiple selection -page.select('select#colors', 'red', 'green', 'blue'); +page.selectOption('select#colors', 'red', 'green', 'blue'); // multiple selection for blue, red and second option -page.select('select#colors', { value: 'blue' }, { index: 2 }, 'red'); +page.selectOption('select#colors', { value: 'blue' }, { index: 2 }, 'red'); ``` -Shortcut for [page.mainFrame().select()](#frameselectselector-values) +Shortcut for [page.mainFrame().selectOption()](#frameselectselector-values) #### page.setContent(html[, options]) - `html` <[string]> HTML markup to assign to the page. @@ -1915,7 +1915,7 @@ An example of getting text from an iframe element: - [frame.name()](#framename) - [frame.parentFrame()](#frameparentframe) - [frame.press(selector, key[, options])](#framepressselector-key-options) -- [frame.select(selector, values[, options])](#frameselectselector-values-options) +- [frame.selectOption(selector, values[, options])](#frameselectoptionselector-values-options) - [frame.setContent(html[, options])](#framesetcontenthtml-options) - [frame.title()](#frametitle) - [frame.tripleclick(selector[, options])](#frametripleclickselector-options) @@ -2253,7 +2253,7 @@ If `key` is a single character and no modifier keys besides `Shift` are being he > **NOTE** Modifier keys DO affect `frame.press`. Holding down `Shift` will type the text in upper case. -#### frame.select(selector, values[, options]) +#### frame.selectOption(selector, values[, options]) - `selector` <[string]> A selector to query frame for. - `values` <[string]|[ElementHandle]|[Object]|[Array]<[string]>|[Array]<[ElementHandle]>|[Array]<[Object]>> Options to select. If the `` element matching `selector`, the method throws an error ```js // single selection matching the value -frame.select('select#colors', 'blue'); +frame.selectOption('select#colors', 'blue'); // single selection matching both the value and the label -frame.select('select#colors', { value: 'blue', label: 'Blue' }); +frame.selectOption('select#colors', { value: 'blue', label: 'Blue' }); // multiple selection -frame.select('select#colors', 'red', 'green', 'blue'); +frame.selectOption('select#colors', 'red', 'green', 'blue'); // multiple selection matching blue, red and second option -frame.select('select#colors', { value: 'blue' }, { index: 2 }, 'red'); +frame.selectOption('select#colors', { value: 'blue' }, { index: 2 }, 'red'); ``` #### frame.setContent(html[, options]) @@ -2531,7 +2531,7 @@ ElementHandle instances can be used as arguments in [`page.$eval()`](#pageevalse - [elementHandle.press(key[, options])](#elementhandlepresskey-options) - [elementHandle.screenshot([options])](#elementhandlescreenshotoptions) - [elementHandle.scrollIntoViewIfNeeded()](#elementhandlescrollintoviewifneeded) -- [elementHandle.select(values[, options])](#elementhandleselectvalues-options) +- [elementHandle.selectOption(values[, options])](#elementhandleselectoptionvalues-options) - [elementHandle.setInputFiles(files)](#elementhandlesetinputfilesfiles) - [elementHandle.toString()](#elementhandletostring) - [elementHandle.tripleclick([options])](#elementhandletripleclickoptions) @@ -2763,7 +2763,7 @@ Throws when ```elementHandle``` does not point to an element [connected](https:/ > **NOTE** If javascript is disabled, element is scrolled into view even when already completely visible. -#### elementHandle.select(values[, options]) +#### elementHandle.selectOption(values[, options]) - `values` <[string]|[ElementHandle]|[Object]|[Array]<[string]>|[Array]<[ElementHandle]>|[Array]<[Object]>> Options to select. If the `` element, the method throws an error. ```js // single selection matching the value -handle.select('blue'); +handle.selectOption('blue'); // single selection matching both the value and the label -handle.select({ value: 'blue', label: 'Blue' }); +handle.selectOption({ value: 'blue', label: 'Blue' }); // multiple selection -handle.select('red', 'green', 'blue'); +handle.selectOption('red', 'green', 'blue'); // multiple selection for blue, red and second option -handle.select({ value: 'blue' }, { index: 2 }, 'red'); +handle.selectOption({ value: 'blue' }, { index: 2 }, 'red'); ``` #### elementHandle.setInputFiles(files) diff --git a/src/dom.ts b/src/dom.ts index 475d948613272..713885a3d472d 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -277,7 +277,7 @@ export class ElementHandle extends js.JSHandle { return this._performPointerAction(point => this._page.mouse.tripleclick(point.x, point.y, options), options); } - async select(values: string | ElementHandle | types.SelectOption | string[] | ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { + async selectOption(values: string | ElementHandle | types.SelectOption | string[] | ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { let vals: string[] | ElementHandle[] | types.SelectOption[]; if (!Array.isArray(values)) vals = [ values ] as (string[] | ElementHandle[] | types.SelectOption[]); diff --git a/src/frames.ts b/src/frames.ts index fa25d0804888e..73d230d3464f2 100644 --- a/src/frames.ts +++ b/src/frames.ts @@ -841,9 +841,9 @@ export class Frame { handle.dispose(); } - async select(selector: string, values: string | dom.ElementHandle | types.SelectOption | string[] | dom.ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { + async selectOption(selector: string, values: string | dom.ElementHandle | types.SelectOption | string[] | dom.ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { const handle = await this._waitForSelectorInUtilityContext(selector, options); - const result = await handle.select(values, options); + const result = await handle.selectOption(values, options); handle.dispose(); return result; } diff --git a/src/page.ts b/src/page.ts index d7723309e886d..4ffdcd3b93d49 100644 --- a/src/page.ts +++ b/src/page.ts @@ -484,8 +484,8 @@ export class Page extends platform.EventEmitter { return this.mainFrame().hover(selector, options); } - async select(selector: string, values: string | dom.ElementHandle | types.SelectOption | string[] | dom.ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { - return this.mainFrame().select(selector, values, options); + async selectOption(selector: string, values: string | dom.ElementHandle | types.SelectOption | string[] | dom.ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise { + return this.mainFrame().selectOption(selector, values, options); } async type(selector: string, text: string, options?: { delay?: number } & types.NavigatingActionWaitOptions) { diff --git a/test/page.spec.js b/test/page.spec.js index 929bb2b30e514..a0ce259836273 100644 --- a/test/page.spec.js +++ b/test/page.spec.js @@ -745,55 +745,55 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF describe('Page.select', function() { it('should select single option', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', 'blue'); + await page.selectOption('select', 'blue'); expect(await page.evaluate(() => result.onInput)).toEqual(['blue']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue']); }); it('should select single option by value', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', { value: 'blue' }); + await page.selectOption('select', { value: 'blue' }); expect(await page.evaluate(() => result.onInput)).toEqual(['blue']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue']); }); it('should select single option by label', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', { label: 'Indigo' }); + await page.selectOption('select', { label: 'Indigo' }); expect(await page.evaluate(() => result.onInput)).toEqual(['indigo']); expect(await page.evaluate(() => result.onChange)).toEqual(['indigo']); }); it('should select single option by handle', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', await page.$('[id=whiteOption]')); + await page.selectOption('select', await page.$('[id=whiteOption]')); expect(await page.evaluate(() => result.onInput)).toEqual(['white']); expect(await page.evaluate(() => result.onChange)).toEqual(['white']); }); it('should select single option by index', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', { index: 2 }); + await page.selectOption('select', { index: 2 }); expect(await page.evaluate(() => result.onInput)).toEqual(['brown']); expect(await page.evaluate(() => result.onChange)).toEqual(['brown']); }); it('should select single option by multiple attributes', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', { value: 'green', label: 'Green' }); + await page.selectOption('select', { value: 'green', label: 'Green' }); expect(await page.evaluate(() => result.onInput)).toEqual(['green']); expect(await page.evaluate(() => result.onChange)).toEqual(['green']); }); it('should not select single option when some attributes do not match', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', { value: 'green', label: 'Brown' }); + await page.selectOption('select', { value: 'green', label: 'Brown' }); expect(await page.evaluate(() => document.querySelector('select').value)).toEqual(''); }); it('should select only first option', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', 'blue', 'green', 'red'); + await page.selectOption('select', 'blue', 'green', 'red'); expect(await page.evaluate(() => result.onInput)).toEqual(['blue']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue']); }); it('should not throw when select causes navigation', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.$eval('select', select => select.addEventListener('input', () => window.location = '/empty.html')); await Promise.all([ - page.select('select', 'blue'), + page.selectOption('select', 'blue'), page.waitForNavigation(), ]); expect(page.url()).toContain('empty.html'); @@ -801,61 +801,61 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF it('should select multiple options', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.evaluate(() => makeMultiple()); - await page.select('select', ['blue', 'green', 'red']); + await page.selectOption('select', ['blue', 'green', 'red']); expect(await page.evaluate(() => result.onInput)).toEqual(['blue', 'green', 'red']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue', 'green', 'red']); }); it('should select multiple options with attributes', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.evaluate(() => makeMultiple()); - await page.select('select', ['blue', { label: 'Green' }, { index: 4 }]); + await page.selectOption('select', ['blue', { label: 'Green' }, { index: 4 }]); expect(await page.evaluate(() => result.onInput)).toEqual(['blue', 'gray', 'green']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue', 'gray', 'green']); }); it('should respect event bubbling', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', 'blue'); + await page.selectOption('select', 'blue'); expect(await page.evaluate(() => result.onBubblingInput)).toEqual(['blue']); expect(await page.evaluate(() => result.onBubblingChange)).toEqual(['blue']); }); it('should throw when element is not a element.'); }); it('should return [] on no matched values', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - const result = await page.select('select','42','abc'); + const result = await page.selectOption('select','42','abc'); expect(result).toEqual([]); }); it('should return an array of matched values', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.evaluate(() => makeMultiple()); - const result = await page.select('select','blue','black','magenta'); + const result = await page.selectOption('select','blue','black','magenta'); expect(result.reduce((accumulator,current) => ['blue', 'black', 'magenta'].includes(current) && accumulator, true)).toEqual(true); }); it('should return an array of one element when multiple is not set', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - const result = await page.select('select',['42','blue','black','magenta']); + const result = await page.selectOption('select',['42','blue','black','magenta']); expect(result.length).toEqual(1); }); it('should return [] on no values',async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - const result = await page.select('select', []); + const result = await page.selectOption('select', []); expect(result).toEqual([]); }); it('should deselect all options when passed no values for a multiple select',async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.evaluate(() => makeMultiple()); - await page.select('select', ['blue','black','magenta']); - await page.select('select', []); + await page.selectOption('select', ['blue','black','magenta']); + await page.selectOption('select', []); expect(await page.$eval('select', select => Array.from(select.options).every(option => !option.selected))).toEqual(true); }); it('should deselect all options when passed no values for a select without multiple',async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); - await page.select('select', ['blue','black','magenta']); - await page.select('select', []); + await page.selectOption('select', ['blue','black','magenta']); + await page.selectOption('select', []); expect(await page.$eval('select', select => Array.from(select.options).every(option => !option.selected))).toEqual(true); }); it('should throw if passed wrong types', async({page, server}) => { @@ -864,7 +864,7 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF error = null; try { - await page.select('select', 12); + await page.selectOption('select', 12); } catch (e) { error = e; } @@ -872,7 +872,7 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF error = null; try { - await page.select('select', { value: 12 }); + await page.selectOption('select', { value: 12 }); } catch (e) { error = e; } @@ -880,7 +880,7 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF error = null; try { - await page.select('select', { label: 12 }); + await page.selectOption('select', { label: 12 }); } catch (e) { error = e; } @@ -888,7 +888,7 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF error = null; try { - await page.select('select', { index: '12' }); + await page.selectOption('select', { index: '12' }); } catch (e) { error = e; } @@ -898,7 +898,7 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF it('should work when re-defining top-level Event class', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); await page.evaluate(() => window.Event = null); - await page.select('select', 'blue'); + await page.selectOption('select', 'blue'); expect(await page.evaluate(() => result.onInput)).toEqual(['blue']); expect(await page.evaluate(() => result.onChange)).toEqual(['blue']); });