2020-12-29 06:50:12 +08:00
|
|
|
/**
|
|
|
|
|
* Copyright (c) Microsoft Corporation.
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
|
*
|
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
*
|
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
|
* limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
2021-05-09 08:45:04 +08:00
|
|
|
import { test, expect } from './inspectorTest';
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test.describe('cli codegen', () => {
|
2021-05-01 04:26:13 +08:00
|
|
|
test.skip(({ mode }) => mode !== 'default');
|
2021-05-14 01:22:23 +08:00
|
|
|
test.fixme(({ browserName, headless }) => browserName === 'firefox' && !headless, 'Focus is off');
|
2021-04-03 02:19:26 +08:00
|
|
|
|
|
|
|
|
test('should click', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.hoverOverElement('button');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=Submit');
|
2020-12-29 09:39:30 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'click'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.dispatchEvent('button', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=Submit
|
|
|
|
|
await page.click('text=Submit');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Click text=Submit
|
|
|
|
|
page.click("text=Submit")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Click text=Submit
|
|
|
|
|
await page.click("text=Submit")`);
|
|
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Click text=Submit
|
|
|
|
|
page.click("text=Submit");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Click text=Submit
|
|
|
|
|
await page.ClickAsync("text=Submit");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('click');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-05-09 08:45:04 +08:00
|
|
|
test('should click after same-document navigation', async ({ page, openRecorder, server }) => {
|
2021-04-03 02:19:26 +08:00
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2021-05-09 08:45:04 +08:00
|
|
|
server.setRoute('/foo.html', (req, res) => {
|
2021-01-14 06:25:42 +08:00
|
|
|
res.setHeader('Content-Type', 'text/html; charset=utf-8');
|
|
|
|
|
res.end('');
|
|
|
|
|
});
|
2021-05-09 08:45:04 +08:00
|
|
|
await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`, server.PREFIX + '/foo.html');
|
2021-01-14 06:25:42 +08:00
|
|
|
await Promise.all([
|
|
|
|
|
page.waitForNavigation(),
|
|
|
|
|
page.evaluate(() => history.pushState({}, '', '/url.html')),
|
|
|
|
|
]);
|
|
|
|
|
// This is the only way to give recorder a chance to install
|
|
|
|
|
// the second unnecessary copy of the recorder script.
|
|
|
|
|
await page.waitForTimeout(1000);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.hoverOverElement('button');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=Submit');
|
2021-01-14 06:25:42 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'click'),
|
2021-01-14 06:25:42 +08:00
|
|
|
page.dispatchEvent('button', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=Submit
|
|
|
|
|
await page.click('text=Submit');`);
|
2021-01-14 06:25:42 +08:00
|
|
|
expect(message.text()).toBe('click');
|
|
|
|
|
});
|
|
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should work with TrustedTypes', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2021-02-23 03:38:49 +08:00
|
|
|
await recorder.setContentAndWait(`
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Security-Policy" content="trusted-types unsafe escape; require-trusted-types-for 'script'">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<button onclick="console.log('click')">Submit</button>
|
|
|
|
|
</body>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.hoverOverElement('button');
|
|
|
|
|
expect(selector).toBe('text=Submit');
|
|
|
|
|
|
|
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-23 03:38:49 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'click'),
|
|
|
|
|
page.dispatchEvent('button', 'click', { detail: 1 })
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
|
|
|
|
// Click text=Submit
|
|
|
|
|
await page.click('text=Submit');`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Click text=Submit
|
|
|
|
|
page.click("text=Submit")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Click text=Submit
|
|
|
|
|
await page.click("text=Submit")`);
|
|
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Click text=Submit
|
|
|
|
|
page.click("text=Submit");`);
|
|
|
|
|
|
2021-02-23 03:38:49 +08:00
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Click text=Submit
|
|
|
|
|
await page.ClickAsync("text=Submit");`);
|
|
|
|
|
|
|
|
|
|
expect(message.text()).toBe('click');
|
|
|
|
|
});
|
|
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should not target selector preview by text regexp', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<span>dummy</span>`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
// Force highlight.
|
|
|
|
|
await recorder.hoverOverElement('span');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
// Append text after highlight.
|
|
|
|
|
await page.evaluate(() => {
|
|
|
|
|
const div = document.createElement('div');
|
|
|
|
|
div.setAttribute('onclick', "console.log('click')");
|
|
|
|
|
div.textContent = ' Some long text here ';
|
|
|
|
|
document.documentElement.appendChild(div);
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.hoverOverElement('div');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=Some long text here');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
// Sanity check that selector does not match our highlight.
|
|
|
|
|
const divContents = await page.$eval(selector, div => div.outerHTML);
|
|
|
|
|
expect(divContents).toBe(`<div onclick="console.log('click')"> Some long text here </div>`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'click'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.dispatchEvent('div', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=Some long text here
|
|
|
|
|
await page.click('text=Some long text here');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('click');
|
|
|
|
|
});
|
|
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should fill', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input id="input" name="name" oninput="console.log(input.value)"></input>`);
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="name"]');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'fill'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.fill('input', 'John')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Fill input[name="name"]
|
|
|
|
|
await page.fill('input[name="name"]', 'John');`);
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Fill input[name="name"]
|
|
|
|
|
page.fill("input[name=\\\"name\\\"]", "John");`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Fill input[name="name"]
|
|
|
|
|
page.fill(\"input[name=\\\"name\\\"]\", \"John\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Fill input[name="name"]
|
|
|
|
|
await page.fill(\"input[name=\\\"name\\\"]\", \"John\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Fill input[name="name"]
|
|
|
|
|
await page.FillAsync(\"input[name=\\\"name\\\"]\", \"John\");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('John');
|
|
|
|
|
});
|
|
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should fill textarea', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<textarea id="textarea" name="name" oninput="console.log(textarea.value)"></textarea>`);
|
|
|
|
|
const selector = await recorder.focusElement('textarea');
|
|
|
|
|
expect(selector).toBe('textarea[name="name"]');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'fill'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.fill('textarea', 'John')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Fill textarea[name="name"]
|
|
|
|
|
await page.fill('textarea[name="name"]', 'John');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('John');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should press', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input name="name" onkeypress="console.log('press')"></input>`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="name"]');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const messages: any[] = [];
|
2020-12-30 01:59:35 +08:00
|
|
|
page.on('console', message => messages.push(message));
|
2021-02-17 10:13:26 +08:00
|
|
|
const [, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
recorder.waitForActionPerformed(),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'press'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.press('input', 'Shift+Enter')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Press Enter with modifiers
|
|
|
|
|
await page.press('input[name="name"]', 'Shift+Enter');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Press Enter with modifiers
|
|
|
|
|
page.press("input[name=\\\"name\\\"]", "Shift+Enter");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Press Enter with modifiers
|
|
|
|
|
page.press(\"input[name=\\\"name\\\"]\", \"Shift+Enter\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Press Enter with modifiers
|
|
|
|
|
await page.press(\"input[name=\\\"name\\\"]\", \"Shift+Enter\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Press Enter with modifiers
|
|
|
|
|
await page.PressAsync(\"input[name=\\\"name\\\"]\", \"Shift+Enter\");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(messages[0].text()).toBe('press');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should update selected element after pressing Tab', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`
|
|
|
|
|
<input name="one"></input>
|
|
|
|
|
<input name="two"></input>
|
|
|
|
|
`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await page.click('input[name="one"]');
|
2021-02-17 10:13:26 +08:00
|
|
|
await recorder.waitForOutput('<javascript>', 'click');
|
2020-12-29 09:39:30 +08:00
|
|
|
await page.keyboard.type('foobar123');
|
2021-02-17 10:13:26 +08:00
|
|
|
await recorder.waitForOutput('<javascript>', 'foobar123');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await page.keyboard.press('Tab');
|
2021-02-17 10:13:26 +08:00
|
|
|
await recorder.waitForOutput('<javascript>', 'Tab');
|
2020-12-29 09:39:30 +08:00
|
|
|
await page.keyboard.type('barfoo321');
|
2021-02-17 10:13:26 +08:00
|
|
|
await recorder.waitForOutput('<javascript>', 'barfoo321');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const text = recorder.sources().get('<javascript>').text;
|
|
|
|
|
expect(text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Fill input[name="one"]
|
|
|
|
|
await page.fill('input[name="one"]', 'foobar123');`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Press Tab
|
|
|
|
|
await page.press('input[name="one"]', 'Tab');`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Fill input[name="two"]
|
|
|
|
|
await page.fill('input[name="two"]', 'barfoo321');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should record ArrowDown', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input name="name" onkeydown="console.log('press:' + event.key)"></input>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="name"]');
|
|
|
|
|
|
|
|
|
|
const messages: any[] = [];
|
|
|
|
|
page.on('console', message => {
|
|
|
|
|
messages.push(message);
|
2020-12-30 01:59:35 +08:00
|
|
|
});
|
2021-02-17 10:13:26 +08:00
|
|
|
const [, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
recorder.waitForActionPerformed(),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'press'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.press('input', 'ArrowDown')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Press ArrowDown
|
|
|
|
|
await page.press('input[name="name"]', 'ArrowDown');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(messages[0].text()).toBe('press:ArrowDown');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should emit single keyup on ArrowDown', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input name="name" onkeydown="console.log('down:' + event.key)" onkeyup="console.log('up:' + event.key)"></input>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="name"]');
|
|
|
|
|
|
|
|
|
|
const messages: any[] = [];
|
|
|
|
|
page.on('console', message => {
|
2021-05-13 06:19:27 +08:00
|
|
|
if (message.type() !== 'error')
|
|
|
|
|
messages.push(message);
|
2020-12-30 01:59:35 +08:00
|
|
|
});
|
2021-02-17 10:13:26 +08:00
|
|
|
const [, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
recorder.waitForActionPerformed(),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'press'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.press('input', 'ArrowDown')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Press ArrowDown
|
|
|
|
|
await page.press('input[name="name"]', 'ArrowDown');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(messages.length).toBe(2);
|
|
|
|
|
expect(messages[0].text()).toBe('down:ArrowDown');
|
|
|
|
|
expect(messages[1].text()).toBe('up:ArrowDown');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should check', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="accept"]');
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'check'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.click('input')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Check input[name="accept"]
|
|
|
|
|
await page.check('input[name="accept"]');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Check input[name="accept"]
|
|
|
|
|
page.check("input[name=\\\"accept\\\"]");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Check input[name="accept"]
|
|
|
|
|
page.check(\"input[name=\\\"accept\\\"]\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Check input[name="accept"]
|
|
|
|
|
await page.check(\"input[name=\\\"accept\\\"]\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Check input[name="accept"]
|
|
|
|
|
await page.CheckAsync(\"input[name=\\\"accept\\\"]\");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('true');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should check with keyboard', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="accept"]');
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'check'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.keyboard.press('Space')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Check input[name="accept"]
|
|
|
|
|
await page.check('input[name="accept"]');`);
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('true');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should uncheck', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" checked name="accept" onchange="console.log(checkbox.checked)"></input>`);
|
|
|
|
|
|
|
|
|
|
const selector = await recorder.focusElement('input');
|
|
|
|
|
expect(selector).toBe('input[name="accept"]');
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'uncheck'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.click('input')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Uncheck input[name="accept"]
|
|
|
|
|
await page.uncheck('input[name="accept"]');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Uncheck input[name="accept"]
|
|
|
|
|
page.uncheck("input[name=\\\"accept\\\"]");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Uncheck input[name="accept"]
|
|
|
|
|
page.uncheck(\"input[name=\\\"accept\\\"]\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Uncheck input[name="accept"]
|
|
|
|
|
await page.uncheck(\"input[name=\\\"accept\\\"]\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Uncheck input[name="accept"]
|
|
|
|
|
await page.UncheckAsync(\"input[name=\\\"accept\\\"]\");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('false');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should select', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait('<select id="age" onchange="console.log(age.selectedOptions[0].value)"><option value="1"><option value="2"></select>');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.hoverOverElement('select');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('select');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [message, sources] = await Promise.all([
|
2021-05-13 06:19:27 +08:00
|
|
|
page.waitForEvent('console', msg => msg.type() !== 'error'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'select'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.selectOption('select', '2')
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2020-12-29 06:50:12 +08:00
|
|
|
// Select 2
|
2021-02-09 13:53:17 +08:00
|
|
|
await page.selectOption('select', '2');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Select 2
|
|
|
|
|
page.selectOption("select", "2");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Select 2
|
|
|
|
|
page.select_option(\"select\", \"2\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Select 2
|
|
|
|
|
await page.select_option(\"select\", \"2\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Select 2
|
|
|
|
|
await page.SelectOptionAsync(\"select\", \"2\");`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(message.text()).toBe('2');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-05-14 01:22:23 +08:00
|
|
|
test('should await popup', async ({ page, openRecorder, browserName, headless }) => {
|
|
|
|
|
test.fixme(browserName === 'webkit' && !headless, 'Middle click does not open a popup in our webkit embedder');
|
2021-04-03 02:19:26 +08:00
|
|
|
|
|
|
|
|
const recorder = await openRecorder();
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait('<a target=_blank rel=noopener href="about:blank">link</a>');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.hoverOverElement('a');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=link');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [popup, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
page.context().waitForEvent('page'),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'waitForEvent'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.dispatchEvent('a', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=link
|
2020-12-29 06:50:12 +08:00
|
|
|
const [page1] = await Promise.all([
|
|
|
|
|
page.waitForEvent('popup'),
|
2021-02-09 13:53:17 +08:00
|
|
|
page.click('text=link')
|
2020-12-29 06:50:12 +08:00
|
|
|
]);`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Click text=link
|
|
|
|
|
Page page1 = page.waitForPopup(() -> {
|
|
|
|
|
page.click("text=link");
|
|
|
|
|
});`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
with page.expect_popup() as popup_info:
|
|
|
|
|
page.click(\"text=link\")
|
|
|
|
|
page1 = popup_info.value`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
async with page.expect_popup() as popup_info:
|
|
|
|
|
await page.click(\"text=link\")
|
|
|
|
|
page1 = await popup_info.value`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
var page1Task = page.WaitForEventAsync(PageEvent.Popup)
|
|
|
|
|
await Task.WhenAll(
|
|
|
|
|
page1Task,
|
|
|
|
|
page.ClickAsync(\"text=link\"));`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(popup.url()).toBe('about:blank');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should assert navigation', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<a onclick="window.location.href='about:blank#foo'">link</a>`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.hoverOverElement('a');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=link');
|
2021-02-17 10:13:26 +08:00
|
|
|
const [, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
page.waitForNavigation(),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'assert'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.dispatchEvent('a', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=link
|
|
|
|
|
await page.click('text=link');
|
2020-12-29 06:50:12 +08:00
|
|
|
// assert.equal(page.url(), 'about:blank#foo');`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Click text=link
|
|
|
|
|
page.click("text=link");
|
|
|
|
|
// assert page.url().equals("about:blank#foo");`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
page.click(\"text=link\")
|
|
|
|
|
# assert page.url == \"about:blank#foo\"`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
await page.click(\"text=link\")
|
|
|
|
|
# assert page.url == \"about:blank#foo\"`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Click text=link
|
|
|
|
|
await page.ClickAsync(\"text=link\");
|
|
|
|
|
// Assert.Equal(\"about:blank#foo\", page.Url);`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(page.url()).toContain('about:blank#foo');
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
|
|
|
|
|
|
2021-04-03 02:19:26 +08:00
|
|
|
test('should await navigation', async ({ page, openRecorder }) => {
|
|
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
await recorder.setContentAndWait(`<a onclick="setTimeout(() => window.location.href='about:blank#foo', 1000)">link</a>`);
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
const selector = await recorder.hoverOverElement('a');
|
2021-02-09 13:53:17 +08:00
|
|
|
expect(selector).toBe('text=link');
|
2020-12-29 06:50:12 +08:00
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
const [, sources] = await Promise.all([
|
2020-12-29 09:39:30 +08:00
|
|
|
page.waitForNavigation(),
|
2021-02-17 10:13:26 +08:00
|
|
|
recorder.waitForOutput('<javascript>', 'waitForNavigation'),
|
2020-12-29 09:39:30 +08:00
|
|
|
page.dispatchEvent('a', 'click', { detail: 1 })
|
|
|
|
|
]);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
|
|
|
|
expect(sources.get('<javascript>').text).toContain(`
|
2021-02-09 13:53:17 +08:00
|
|
|
// Click text=link
|
2020-12-29 06:50:12 +08:00
|
|
|
await Promise.all([
|
|
|
|
|
page.waitForNavigation(/*{ url: 'about:blank#foo' }*/),
|
2021-02-09 13:53:17 +08:00
|
|
|
page.click('text=link')
|
2020-12-29 06:50:12 +08:00
|
|
|
]);`);
|
2021-02-17 10:13:26 +08:00
|
|
|
|
2021-03-04 06:32:09 +08:00
|
|
|
expect(sources.get('<java>').text).toContain(`
|
|
|
|
|
// Click text=link
|
2021-03-06 06:05:48 +08:00
|
|
|
// page.waitForNavigation(new Page.WaitForNavigationOptions().setUrl("about:blank#foo"), () ->
|
2021-03-04 06:32:09 +08:00
|
|
|
page.waitForNavigation(() -> {
|
|
|
|
|
page.click("text=link");
|
|
|
|
|
});`);
|
|
|
|
|
|
2021-02-17 10:13:26 +08:00
|
|
|
expect(sources.get('<python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
# with page.expect_navigation(url=\"about:blank#foo\"):
|
|
|
|
|
with page.expect_navigation():
|
|
|
|
|
page.click(\"text=link\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<async python>').text).toContain(`
|
|
|
|
|
# Click text=link
|
|
|
|
|
# async with page.expect_navigation(url=\"about:blank#foo\"):
|
|
|
|
|
async with page.expect_navigation():
|
|
|
|
|
await page.click(\"text=link\")`);
|
|
|
|
|
|
|
|
|
|
expect(sources.get('<csharp>').text).toContain(`
|
|
|
|
|
// Click text=link
|
|
|
|
|
await Task.WhenAll(
|
|
|
|
|
page.WaitForNavigationAsync(/*\"about:blank#foo\"*/),
|
|
|
|
|
page.ClickAsync(\"text=link\"));`);
|
|
|
|
|
|
2020-12-29 09:39:30 +08:00
|
|
|
expect(page.url()).toContain('about:blank#foo');
|
|
|
|
|
});
|
2021-04-13 00:00:29 +08:00
|
|
|
|
2021-05-14 01:22:23 +08:00
|
|
|
test('should ignore AltGraph', async ({ openRecorder, browserName }) => {
|
|
|
|
|
test.skip(browserName === 'firefox', 'The TextInputProcessor in Firefox does not work with AltGraph.');
|
2021-04-13 00:00:29 +08:00
|
|
|
const recorder = await openRecorder();
|
|
|
|
|
await recorder.setContentAndWait(`<input></input>`);
|
|
|
|
|
|
|
|
|
|
await recorder.page.type('input', 'playwright');
|
|
|
|
|
await recorder.page.keyboard.press('AltGraph');
|
|
|
|
|
await recorder.page.keyboard.insertText('@');
|
|
|
|
|
await recorder.page.keyboard.type('example.com');
|
|
|
|
|
await recorder.waitForOutput('<javascript>', 'example.com');
|
|
|
|
|
expect(recorder.sources().get('<javascript>').text).not.toContain(`await page.press('input', 'AltGraph');`);
|
|
|
|
|
expect(recorder.sources().get('<javascript>').text).toContain(`await page.fill('input', 'playwright@example.com');`);
|
|
|
|
|
});
|
2020-12-29 06:50:12 +08:00
|
|
|
});
|
