Skip to content

Commit

Permalink
api(*.selectOption): renamed from *.select (#1371)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavelfeldman
pavelfeldman committed Mar 13, 2020
1 parent 064099a commit e1d3196
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 50 deletions.
38 changes: 19 additions & 19 deletions docs/api.md
View file
Expand Up @@ -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)
Expand Down Expand Up @@ -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 `<select>` has the `multiple` attribute, all matching options are selected, otherwise only the first option matching one of the passed options is selected. String values are equivalent to `{value:'string'}`. Option is considered matching if all specified properties match.
- `value` <[string]> Matches by `option.value`.
Expand All @@ -1494,19 +1494,19 @@ If there's no `<select>` 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.
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 `<select>` has the `multiple` attribute, all matching options are selected, otherwise only the first option matching one of the passed options is selected. String values are equivalent to `{value:'string'}`. Option is considered matching if all specified properties match.
- `value` <[string]> Matches by `option.value`.
Expand All @@ -2274,16 +2274,16 @@ If there's no `<select>` 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])
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 `<select>` has the `multiple` attribute, all matching options are selected, otherwise only the first option matching one of the passed options is selected. String values are equivalent to `{value:'string'}`. Option is considered matching if all specified properties match.
- `value` <[string]> Matches by `option.value`.
- `label` <[string]> Matches by `option.label`.
Expand All @@ -2783,16 +2783,16 @@ If element is not a `<select>` 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)
Expand Down
2 changes: 1 addition & 1 deletion src/dom.ts
View file
Expand Up @@ -277,7 +277,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
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<string[]> {
async selectOption(values: string | ElementHandle | types.SelectOption | string[] | ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise<string[]> {
let vals: string[] | ElementHandle[] | types.SelectOption[];
if (!Array.isArray(values))
vals = [ values ] as (string[] | ElementHandle[] | types.SelectOption[]);
Expand Down
4 changes: 2 additions & 2 deletions src/frames.ts
View file
Expand Up @@ -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<string[]> {
async selectOption(selector: string, values: string | dom.ElementHandle | types.SelectOption | string[] | dom.ElementHandle[] | types.SelectOption[], options?: types.NavigatingActionWaitOptions): Promise<string[]> {
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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/page.ts
View file
Expand Up @@ -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<string[]> {
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<string[]> {
return this.mainFrame().selectOption(selector, values, options);
}

async type(selector: string, text: string, options?: { delay?: number } & types.NavigatingActionWaitOptions) {
Expand Down
52 changes: 26 additions & 26 deletions test/page.spec.js
View file
Expand Up @@ -745,117 +745,117 @@ 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');
});
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 <select>', async({page, server}) => {
let error = null;
await page.goto(server.PREFIX + '/input/select.html');
await page.select('body', '').catch(e => error = e);
await page.selectOption('body', '').catch(e => error = e);
expect(error.message).toContain('Element is not a <select> 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}) => {
Expand All @@ -864,31 +864,31 @@ 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;
}
expect(error.message).toContain('Values must be strings');

error = null;
try {
await page.select('select', { value: 12 });
await page.selectOption('select', { value: 12 });
} catch (e) {
error = e;
}
expect(error.message).toContain('Values must be strings');

error = null;
try {
await page.select('select', { label: 12 });
await page.selectOption('select', { label: 12 });
} catch (e) {
error = e;
}
expect(error.message).toContain('Labels must be strings');

error = null;
try {
await page.select('select', { index: '12' });
await page.selectOption('select', { index: '12' });
} catch (e) {
error = e;
}
Expand All @@ -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']);
});
Expand Down

0 comments on commit e1d3196

Please sign in to comment.