Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

api(*.selectOption): renamed from *.select (#1371)

Browse source
This commit is contained in:
Pavel Feldman 2020-03-12 21:30:12 -07:00 committed by GitHub
parent 064099ab3c
commit e1d3196460
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
docs/api.md
View file

@ -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 `<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`.
@ -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.
@ -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 `<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`.
@ -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])
@ -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 `<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`.
@ -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)

2
src/dom.ts
View file

@ -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[]);

4
src/frames.ts
View file

@ -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;
}

4
src/page.ts
View file

@ -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) {

52
test/page.spec.js
View file

@ -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 <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}) => {
@ -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']);
});