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

test: disable most codegen on headful firefox (#4839)

Browse source 
It has problems with focus.
This commit is contained in:
Dmitry Gozman 2020-12-28 17:39:30 -08:00 committed by GitHub
parent 7f8717f139
commit 8fbb984f64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 424 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

850
test/cli/cli-codegen.spec.ts
View file

@ -18,485 +18,482 @@ import { folio } from './cli.fixtures';
import * as http from 'http'; import * as http from 'http';
import * as url from 'url'; import * as url from 'url';
const { it, expect } = folio; const { it, describe, expect } = folio;
it('should click', async ({ page, recorder }) => { describe('cli codegen', (test, { browserName, headful }) => {
await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`); test.fixme(browserName === 'firefox' && headful, 'Focus is off');
}, () => {
it('should click', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`);
const selector = await recorder.hoverOverElement('button'); const selector = await recorder.hoverOverElement('button');
expect(selector).toBe('text="Submit"'); expect(selector).toBe('text="Submit"');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('click'), recorder.waitForOutput('click'),
page.dispatchEvent('button', 'click', { detail: 1 }) page.dispatchEvent('button', 'click', { detail: 1 })
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Click text="Submit" // Click text="Submit"
await page.click('text="Submit"');`); await page.click('text="Submit"');`);
expect(message.text()).toBe('click'); expect(message.text()).toBe('click');
});
it('should not target selector preview by text regexp', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<span>dummy</span>`);
// Force highlight.
await recorder.hoverOverElement('span');
// 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);
}); });
const selector = await recorder.hoverOverElement('div'); it('should not target selector preview by text regexp', async ({ page, recorder }) => {
expect(selector).toBe('text=/.*Some long text here.*/'); await recorder.setContentAndWait(`<span>dummy</span>`);
// Sanity check that selector does not match our highlight. // Force highlight.
const divContents = await page.$eval(selector, div => div.outerHTML); await recorder.hoverOverElement('span');
expect(divContents).toBe(`<div onclick="console.log('click')"> Some long text here </div>`);
const [message] = await Promise.all([ // Append text after highlight.
page.waitForEvent('console'), await page.evaluate(() => {
recorder.waitForOutput('click'), const div = document.createElement('div');
page.dispatchEvent('div', 'click', { detail: 1 }) div.setAttribute('onclick', "console.log('click')");
]); div.textContent = ' Some long text here ';
expect(recorder.output()).toContain(` document.documentElement.appendChild(div);
});
const selector = await recorder.hoverOverElement('div');
expect(selector).toBe('text=/.*Some long text here.*/');
// 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>`);
const [message] = await Promise.all([
page.waitForEvent('console'),
recorder.waitForOutput('click'),
page.dispatchEvent('div', 'click', { detail: 1 })
]);
expect(recorder.output()).toContain(`
// Click text=/.*Some long text here.*/ // Click text=/.*Some long text here.*/
await page.click('text=/.*Some long text here.*/');`); await page.click('text=/.*Some long text here.*/');`);
expect(message.text()).toBe('click'); expect(message.text()).toBe('click');
}); });
it('should fill', async ({ page, recorder }) => { it('should fill', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="input" name="name" oninput="console.log(input.value)"></input>`); await recorder.setContentAndWait(`<input id="input" name="name" oninput="console.log(input.value)"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="name"]'); expect(selector).toBe('input[name="name"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('fill'), recorder.waitForOutput('fill'),
page.fill('input', 'John') page.fill('input', 'John')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Fill input[name="name"] // Fill input[name="name"]
await page.fill('input[name="name"]', 'John');`); await page.fill('input[name="name"]', 'John');`);
expect(message.text()).toBe('John'); expect(message.text()).toBe('John');
}); });
it('should fill textarea', async ({ page, recorder }) => { it('should fill textarea', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<textarea id="textarea" name="name" oninput="console.log(textarea.value)"></textarea>`); await recorder.setContentAndWait(`<textarea id="textarea" name="name" oninput="console.log(textarea.value)"></textarea>`);
const selector = await recorder.focusElement('textarea'); const selector = await recorder.focusElement('textarea');
expect(selector).toBe('textarea[name="name"]'); expect(selector).toBe('textarea[name="name"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('fill'), recorder.waitForOutput('fill'),
page.fill('textarea', 'John') page.fill('textarea', 'John')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Fill textarea[name="name"] // Fill textarea[name="name"]
await page.fill('textarea[name="name"]', 'John');`); await page.fill('textarea[name="name"]', 'John');`);
expect(message.text()).toBe('John'); expect(message.text()).toBe('John');
}); });
it('should press', async ({ page, recorder }) => { it('should press', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input name="name" onkeypress="console.log('press')"></input>`); await recorder.setContentAndWait(`<input name="name" onkeypress="console.log('press')"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="name"]'); expect(selector).toBe('input[name="name"]');
const messages: any[] = []; const messages: any[] = [];
page.on('console', message => messages.push(message)), page.on('console', message => messages.push(message)),
await Promise.all([ await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
recorder.waitForOutput('press'), recorder.waitForOutput('press'),
page.press('input', 'Shift+Enter') page.press('input', 'Shift+Enter')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Press Enter with modifiers // Press Enter with modifiers
await page.press('input[name="name"]', 'Shift+Enter');`); await page.press('input[name="name"]', 'Shift+Enter');`);
expect(messages[0].text()).toBe('press'); expect(messages[0].text()).toBe('press');
}); });
it('should update selected element after pressing Tab', async ({ page, recorder }) => { it('should update selected element after pressing Tab', async ({ page, recorder }) => {
await recorder.setContentAndWait(` await recorder.setContentAndWait(`
<input name="one"></input> <input name="one"></input>
<input name="two"></input> <input name="two"></input>
`); `);
await page.click('input[name="one"]'); await page.click('input[name="one"]');
await recorder.waitForOutput('click'); await recorder.waitForOutput('click');
await page.keyboard.type('foobar123'); await page.keyboard.type('foobar123');
await recorder.waitForOutput('foobar123'); await recorder.waitForOutput('foobar123');
await page.keyboard.press('Tab'); await page.keyboard.press('Tab');
await recorder.waitForOutput('Tab'); await recorder.waitForOutput('Tab');
await page.keyboard.type('barfoo321'); await page.keyboard.type('barfoo321');
await recorder.waitForOutput('barfoo321'); await recorder.waitForOutput('barfoo321');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Fill input[name="one"] // Fill input[name="one"]
await page.fill('input[name="one"]', 'foobar123');`); await page.fill('input[name="one"]', 'foobar123');`);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Press Tab // Press Tab
await page.press('input[name="one"]', 'Tab');`); await page.press('input[name="one"]', 'Tab');`);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Fill input[name="two"] // Fill input[name="two"]
await page.fill('input[name="two"]', 'barfoo321');`); await page.fill('input[name="two"]', 'barfoo321');`);
}); });
it('should record ArrowDown', async ({ page, recorder }) => { it('should record ArrowDown', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input name="name" onkeydown="console.log('press:' + event.key)"></input>`); await recorder.setContentAndWait(`<input name="name" onkeydown="console.log('press:' + event.key)"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="name"]'); expect(selector).toBe('input[name="name"]');
const messages: any[] = []; const messages: any[] = [];
page.on('console', message => { page.on('console', message => {
messages.push(message); messages.push(message);
}), }),
await Promise.all([ await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
recorder.waitForOutput('press'), recorder.waitForOutput('press'),
page.press('input', 'ArrowDown') page.press('input', 'ArrowDown')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Press ArrowDown // Press ArrowDown
await page.press('input[name="name"]', 'ArrowDown');`); await page.press('input[name="name"]', 'ArrowDown');`);
expect(messages[0].text()).toBe('press:ArrowDown'); expect(messages[0].text()).toBe('press:ArrowDown');
}); });
it('should emit single keyup on ArrowDown', async ({ page, recorder }) => { it('should emit single keyup on ArrowDown', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input name="name" onkeydown="console.log('down:' + event.key)" onkeyup="console.log('up:' + event.key)"></input>`); 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'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="name"]'); expect(selector).toBe('input[name="name"]');
const messages: any[] = []; const messages: any[] = [];
page.on('console', message => { page.on('console', message => {
messages.push(message); messages.push(message);
}), }),
await Promise.all([ await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
recorder.waitForOutput('press'), recorder.waitForOutput('press'),
page.press('input', 'ArrowDown') page.press('input', 'ArrowDown')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Press ArrowDown // Press ArrowDown
await page.press('input[name="name"]', 'ArrowDown');`); await page.press('input[name="name"]', 'ArrowDown');`);
expect(messages.length).toBe(2); expect(messages.length).toBe(2);
expect(messages[0].text()).toBe('down:ArrowDown'); expect(messages[0].text()).toBe('down:ArrowDown');
expect(messages[1].text()).toBe('up:ArrowDown'); expect(messages[1].text()).toBe('up:ArrowDown');
}); });
it('should check', (test, { browserName, headful }) => { it('should check', async ({ page, recorder }) => {
test.fixme(browserName === 'firefox' && headful, 'Focus is off'); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
}, async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="accept"]'); expect(selector).toBe('input[name="accept"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('check'), recorder.waitForOutput('check'),
page.click('input') page.click('input')
]); ]);
await recorder.waitForOutput('check'); await recorder.waitForOutput('check');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Check input[name="accept"] // Check input[name="accept"]
await page.check('input[name="accept"]');`); await page.check('input[name="accept"]');`);
expect(message.text()).toBe('true'); expect(message.text()).toBe('true');
}); });
it('should check with keyboard', (test, { browserName, headful }) => { it('should check with keyboard', async ({ page, recorder }) => {
test.fixme(browserName === 'firefox' && headful, 'Focus is off'); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
}, async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="accept"]'); expect(selector).toBe('input[name="accept"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('check'), recorder.waitForOutput('check'),
page.keyboard.press('Space') page.keyboard.press('Space')
]); ]);
await recorder.waitForOutput('check'); await recorder.waitForOutput('check');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Check input[name="accept"] // Check input[name="accept"]
await page.check('input[name="accept"]');`); await page.check('input[name="accept"]');`);
expect(message.text()).toBe('true'); expect(message.text()).toBe('true');
}); });
it('should uncheck', (test, { browserName, headful }) => { it('should uncheck', async ({ page, recorder }) => {
test.fixme(browserName === 'firefox' && headful, 'Focus is off'); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" checked name="accept" onchange="console.log(checkbox.checked)"></input>`);
}, async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" checked name="accept" onchange="console.log(checkbox.checked)"></input>`);
const selector = await recorder.focusElement('input'); const selector = await recorder.focusElement('input');
expect(selector).toBe('input[name="accept"]'); expect(selector).toBe('input[name="accept"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('uncheck'), recorder.waitForOutput('uncheck'),
page.click('input') page.click('input')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Uncheck input[name="accept"] // Uncheck input[name="accept"]
await page.uncheck('input[name="accept"]');`); await page.uncheck('input[name="accept"]');`);
expect(message.text()).toBe('false'); expect(message.text()).toBe('false');
}); });
it('should select', async ({ page, recorder }) => { it('should select', async ({ page, recorder }) => {
await recorder.setContentAndWait('<select id="age" onchange="console.log(age.selectedOptions[0].value)"><option value="1"><option value="2"></select>'); await recorder.setContentAndWait('<select id="age" onchange="console.log(age.selectedOptions[0].value)"><option value="1"><option value="2"></select>');
const selector = await recorder.hoverOverElement('select'); const selector = await recorder.hoverOverElement('select');
expect(selector).toBe('select[id="age"]'); expect(selector).toBe('select[id="age"]');
const [message] = await Promise.all([ const [message] = await Promise.all([
page.waitForEvent('console'), page.waitForEvent('console'),
recorder.waitForOutput('select'), recorder.waitForOutput('select'),
page.selectOption('select', '2') page.selectOption('select', '2')
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Select 2 // Select 2
await page.selectOption('select[id="age"]', '2');`); await page.selectOption('select[id="age"]', '2');`);
expect(message.text()).toBe('2'); expect(message.text()).toBe('2');
}); });
it('should await popup', (test, { browserName, headful }) => { it('should await popup', (test, { browserName, headful }) => {
test.fixme(browserName === 'webkit' && headful, 'Middle click does not open a popup in our webkit embedder'); test.fixme(browserName === 'webkit' && headful, 'Middle click does not open a popup in our webkit embedder');
}, async ({ page, recorder }) => { }, async ({ page, recorder }) => {
await recorder.setContentAndWait('<a target=_blank rel=noopener href="about:blank">link</a>'); await recorder.setContentAndWait('<a target=_blank rel=noopener href="about:blank">link</a>');
const selector = await recorder.hoverOverElement('a'); const selector = await recorder.hoverOverElement('a');
expect(selector).toBe('text="link"'); expect(selector).toBe('text="link"');
const [popup] = await Promise.all([ const [popup] = await Promise.all([
page.context().waitForEvent('page'), page.context().waitForEvent('page'),
recorder.waitForOutput('waitForEvent'), recorder.waitForOutput('waitForEvent'),
page.dispatchEvent('a', 'click', { detail: 1 }) page.dispatchEvent('a', 'click', { detail: 1 })
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Click text="link" // Click text="link"
const [page1] = await Promise.all([ const [page1] = await Promise.all([
page.waitForEvent('popup'), page.waitForEvent('popup'),
page.click('text="link"') page.click('text="link"')
]);`); ]);`);
expect(popup.url()).toBe('about:blank'); expect(popup.url()).toBe('about:blank');
}); });
it('should assert navigation', async ({ page, recorder }) => { it('should assert navigation', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<a onclick="window.location.href='about:blank#foo'">link</a>`); await recorder.setContentAndWait(`<a onclick="window.location.href='about:blank#foo'">link</a>`);
const selector = await recorder.hoverOverElement('a'); const selector = await recorder.hoverOverElement('a');
expect(selector).toBe('text="link"'); expect(selector).toBe('text="link"');
await Promise.all([ await Promise.all([
page.waitForNavigation(), page.waitForNavigation(),
recorder.waitForOutput('assert'), recorder.waitForOutput('assert'),
page.dispatchEvent('a', 'click', { detail: 1 }) page.dispatchEvent('a', 'click', { detail: 1 })
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Click text="link" // Click text="link"
await page.click('text="link"'); await page.click('text="link"');
// assert.equal(page.url(), 'about:blank#foo');`); // assert.equal(page.url(), 'about:blank#foo');`);
expect(page.url()).toContain('about:blank#foo'); expect(page.url()).toContain('about:blank#foo');
}); });
it('should await navigation', async ({ page, recorder }) => { it('should await navigation', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<a onclick="setTimeout(() => window.location.href='about:blank#foo', 1000)">link</a>`); await recorder.setContentAndWait(`<a onclick="setTimeout(() => window.location.href='about:blank#foo', 1000)">link</a>`);
const selector = await recorder.hoverOverElement('a'); const selector = await recorder.hoverOverElement('a');
expect(selector).toBe('text="link"'); expect(selector).toBe('text="link"');
await Promise.all([ await Promise.all([
page.waitForNavigation(), page.waitForNavigation(),
recorder.waitForOutput('waitForNavigation'), recorder.waitForOutput('waitForNavigation'),
page.dispatchEvent('a', 'click', { detail: 1 }) page.dispatchEvent('a', 'click', { detail: 1 })
]); ]);
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Click text="link" // Click text="link"
await Promise.all([ await Promise.all([
page.waitForNavigation(/*{ url: 'about:blank#foo' }*/), page.waitForNavigation(/*{ url: 'about:blank#foo' }*/),
page.click('text="link"') page.click('text="link"')
]);`); ]);`);
expect(page.url()).toContain('about:blank#foo'); expect(page.url()).toContain('about:blank#foo');
}); });
it('should contain open page', async ({ recorder }) => { it('should contain open page', async ({ recorder }) => {
await recorder.setContentAndWait(``); await recorder.setContentAndWait(``);
expect(recorder.output()).toContain(`const page = await context.newPage();`); expect(recorder.output()).toContain(`const page = await context.newPage();`);
}); });
it('should contain second page', async ({ contextWrapper, recorder }) => { it('should contain second page', async ({ contextWrapper, recorder }) => {
await recorder.setContentAndWait(``); await recorder.setContentAndWait(``);
await contextWrapper.context.newPage(); await contextWrapper.context.newPage();
await recorder.waitForOutput('page1'); await recorder.waitForOutput('page1');
expect(recorder.output()).toContain('const page1 = await context.newPage();'); expect(recorder.output()).toContain('const page1 = await context.newPage();');
}); });
it('should contain close page', async ({ contextWrapper, recorder }) => { it('should contain close page', async ({ contextWrapper, recorder }) => {
await recorder.setContentAndWait(``); await recorder.setContentAndWait(``);
await contextWrapper.context.newPage(); await contextWrapper.context.newPage();
await recorder.page.close(); await recorder.page.close();
await recorder.waitForOutput('page.close();'); await recorder.waitForOutput('page.close();');
}); });
it('should not lead to an error if /html gets clicked', async ({ contextWrapper, recorder }) => { it('should not lead to an error if /html gets clicked', async ({ contextWrapper, recorder }) => {
await recorder.setContentAndWait(''); await recorder.setContentAndWait('');
await contextWrapper.context.newPage(); await contextWrapper.context.newPage();
const errors: any[] = []; const errors: any[] = [];
recorder.page.on('pageerror', e => errors.push(e)); recorder.page.on('pageerror', e => errors.push(e));
await recorder.page.evaluate(() => document.querySelector('body').remove()); await recorder.page.evaluate(() => document.querySelector('body').remove());
const selector = await recorder.hoverOverElement('html'); const selector = await recorder.hoverOverElement('html');
expect(selector).toBe('/html'); expect(selector).toBe('/html');
await recorder.page.close(); await recorder.page.close();
await recorder.waitForOutput('page.close();'); await recorder.waitForOutput('page.close();');
expect(errors.length).toBe(0); expect(errors.length).toBe(0);
}); });
it('should upload a single file', async ({ page, recorder }) => { it('should upload a single file', async ({ page, recorder }) => {
await recorder.setContentAndWait(` await recorder.setContentAndWait(`
<form> <form>
<input type="file"> <input type="file">
</form> </form>
`); `);
await page.focus('input[type=file]'); await page.focus('input[type=file]');
await page.setInputFiles('input[type=file]', 'test/assets/file-to-upload.txt'); await page.setInputFiles('input[type=file]', 'test/assets/file-to-upload.txt');
await page.click('input[type=file]'); await page.click('input[type=file]');
await recorder.waitForOutput('setInputFiles'); await recorder.waitForOutput('setInputFiles');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Upload file-to-upload.txt // Upload file-to-upload.txt
await page.setInputFiles('input[type="file"]', 'file-to-upload.txt');`); await page.setInputFiles('input[type="file"]', 'file-to-upload.txt');`);
}); });
it('should upload multiple files', async ({ page, recorder }) => { it('should upload multiple files', async ({ page, recorder }) => {
await recorder.setContentAndWait(` await recorder.setContentAndWait(`
<form> <form>
<input type="file" multiple> <input type="file" multiple>
</form> </form>
`); `);
await page.focus('input[type=file]'); await page.focus('input[type=file]');
await page.setInputFiles('input[type=file]', ['test/assets/file-to-upload.txt', 'test/assets/file-to-upload-2.txt']); await page.setInputFiles('input[type=file]', ['test/assets/file-to-upload.txt', 'test/assets/file-to-upload-2.txt']);
await page.click('input[type=file]'); await page.click('input[type=file]');
await recorder.waitForOutput('setInputFiles'); await recorder.waitForOutput('setInputFiles');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Upload file-to-upload.txt, file-to-upload-2.txt // Upload file-to-upload.txt, file-to-upload-2.txt
await page.setInputFiles('input[type="file"]', ['file-to-upload.txt', 'file-to-upload-2.txt']);`); await page.setInputFiles('input[type="file"]', ['file-to-upload.txt', 'file-to-upload-2.txt']);`);
}); });
it('should clear files', async ({ page, recorder }) => { it('should clear files', async ({ page, recorder }) => {
await recorder.setContentAndWait(` await recorder.setContentAndWait(`
<form> <form>
<input type="file" multiple> <input type="file" multiple>
</form> </form>
`); `);
await page.focus('input[type=file]'); await page.focus('input[type=file]');
await page.setInputFiles('input[type=file]', 'test/assets/file-to-upload.txt'); await page.setInputFiles('input[type=file]', 'test/assets/file-to-upload.txt');
await page.setInputFiles('input[type=file]', []); await page.setInputFiles('input[type=file]', []);
await page.click('input[type=file]'); await page.click('input[type=file]');
await recorder.waitForOutput('setInputFiles'); await recorder.waitForOutput('setInputFiles');
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Clear selected files // Clear selected files
await page.setInputFiles('input[type="file"]', []);`); await page.setInputFiles('input[type="file"]', []);`);
});
it('should download files', async ({ page, recorder, httpServer }) => {
httpServer.setHandler((req: http.IncomingMessage, res: http.ServerResponse) => {
const pathName = url.parse(req.url!).path;
if (pathName === '/download') {
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename=file.txt');
res.end(`Hello world`);
} else {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end('');
}
}); });
await recorder.setContentAndWait(`
<a href="${httpServer.PREFIX}/download" download>Download</a> it('should download files', async ({ page, recorder, httpServer }) => {
`, httpServer.PREFIX); httpServer.setHandler((req: http.IncomingMessage, res: http.ServerResponse) => {
await recorder.hoverOverElement('text=Download'); const pathName = url.parse(req.url!).path;
await Promise.all([ if (pathName === '/download') {
page.waitForEvent('download'), res.setHeader('Content-Type', 'application/octet-stream');
page.click('text=Download') res.setHeader('Content-Disposition', 'attachment; filename=file.txt');
]); res.end(`Hello world`);
await recorder.waitForOutput('page.click'); } else {
expect(recorder.output()).toContain(` res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end('');
}
});
await recorder.setContentAndWait(`
<a href="${httpServer.PREFIX}/download" download>Download</a>
`, httpServer.PREFIX);
await recorder.hoverOverElement('text=Download');
await Promise.all([
page.waitForEvent('download'),
page.click('text=Download')
]);
await recorder.waitForOutput('page.click');
expect(recorder.output()).toContain(`
// Click text="Download" // Click text="Download"
const [download] = await Promise.all([ const [download] = await Promise.all([
page.waitForEvent('download'), page.waitForEvent('download'),
page.click('text="Download"') page.click('text="Download"')
]);`); ]);`);
});
it('should handle dialogs', async ({ page, recorder }) => {
await recorder.setContentAndWait(`
<button onclick="alert()">click me</button>
`);
await recorder.hoverOverElement('button');
page.once('dialog', async dialog => {
await dialog.dismiss();
}); });
await page.click('text="click me"');
await recorder.waitForOutput('page.once'); it('should handle dialogs', async ({ page, recorder }) => {
expect(recorder.output()).toContain(` await recorder.setContentAndWait(`
<button onclick="alert()">click me</button>
`);
await recorder.hoverOverElement('button');
page.once('dialog', async dialog => {
await dialog.dismiss();
});
await page.click('text="click me"');
await recorder.waitForOutput('page.once');
expect(recorder.output()).toContain(`
// Click text="click me" // Click text="click me"
page.once('dialog', dialog => { page.once('dialog', dialog => {
console.log(\`Dialog message: $\{dialog.message()}\`); console.log(\`Dialog message: $\{dialog.message()}\`);
dialog.dismiss().catch(() => {}); dialog.dismiss().catch(() => {});
}); });
await page.click('text="click me"')`); await page.click('text="click me"')`);
});
it('should handle history.postData', async ({ page, recorder, httpServer }) => {
httpServer.setHandler((req: http.IncomingMessage, res: http.ServerResponse) => {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end('Hello world');
}); });
await recorder.setContentAndWait(`
<script>
let seqNum = 0;
function pushState() {
history.pushState({}, 'title', '${httpServer.PREFIX}/#seqNum=' + (++seqNum));
}
</script>`, httpServer.PREFIX);
for (let i = 1; i < 3; ++i) {
await page.evaluate('pushState()');
await recorder.waitForOutput(`seqNum=${i}`);
expect(recorder.output()).toContain(`await page.goto('${httpServer.PREFIX}/#seqNum=${i}');`);
}
});
it('should record open in a new tab with url', (test, { browserName }) => { it('should handle history.postData', async ({ page, recorder, httpServer }) => {
test.fixme(browserName === 'webkit', 'Ctrl+click does not open in new tab on WebKit'); httpServer.setHandler((req: http.IncomingMessage, res: http.ServerResponse) => {
}, async ({ page, recorder, browserName, platform }) => { res.setHeader('Content-Type', 'text/html; charset=utf-8');
await recorder.setContentAndWait(`<a href="about:blank?foo">link</a>`); res.end('Hello world');
});
await recorder.setContentAndWait(`
<script>
let seqNum = 0;
function pushState() {
history.pushState({}, 'title', '${httpServer.PREFIX}/#seqNum=' + (++seqNum));
}
</script>`, httpServer.PREFIX);
for (let i = 1; i < 3; ++i) {
await page.evaluate('pushState()');
await recorder.waitForOutput(`seqNum=${i}`);
expect(recorder.output()).toContain(`await page.goto('${httpServer.PREFIX}/#seqNum=${i}');`);
}
});
const selector = await recorder.hoverOverElement('a'); it('should record open in a new tab with url', (test, { browserName }) => {
expect(selector).toBe('text="link"'); test.fixme(browserName === 'webkit', 'Ctrl+click does not open in new tab on WebKit');
}, async ({ page, recorder, browserName, platform }) => {
await recorder.setContentAndWait(`<a href="about:blank?foo">link</a>`);
await page.click('a', { modifiers: [ platform === 'darwin' ? 'Meta' : 'Control'] }); const selector = await recorder.hoverOverElement('a');
await recorder.waitForOutput('page1'); expect(selector).toBe('text="link"');
if (browserName === 'chromium') {
expect(recorder.output()).toContain(` await page.click('a', { modifiers: [ platform === 'darwin' ? 'Meta' : 'Control'] });
await recorder.waitForOutput('page1');
if (browserName === 'chromium') {
expect(recorder.output()).toContain(`
// Open new page // Open new page
const page1 = await context.newPage(); const page1 = await context.newPage();
page1.goto('about:blank?foo');`); page1.goto('about:blank?foo');`);
} else if (browserName === 'firefox') { } else if (browserName === 'firefox') {
expect(recorder.output()).toContain(` expect(recorder.output()).toContain(`
// Click text="link" // Click text="link"
const [page1] = await Promise.all([ const [page1] = await Promise.all([
page.waitForEvent('popup'), page.waitForEvent('popup'),
@ -504,78 +501,79 @@ it('should record open in a new tab with url', (test, { browserName }) => {
modifiers: ['${platform === 'darwin' ? 'Meta' : 'Control'}'] modifiers: ['${platform === 'darwin' ? 'Meta' : 'Control'}']
}) })
]);`); ]);`);
} }
}); });
it('should not clash pages', (test, { browserName }) => { it('should not clash pages', (test, { browserName }) => {
test.fixme(browserName === 'firefox', 'Times out on Firefox, maybe the focus issue'); test.fixme(browserName === 'firefox', 'Times out on Firefox, maybe the focus issue');
}, async ({ page, recorder }) => { }, async ({ page, recorder }) => {
const [popup1] = await Promise.all([ const [popup1] = await Promise.all([
page.context().waitForEvent('page'), page.context().waitForEvent('page'),
page.evaluate(`window.open('about:blank')`) page.evaluate(`window.open('about:blank')`)
]); ]);
await recorder.setPageContentAndWait(popup1, '<input id=name>'); await recorder.setPageContentAndWait(popup1, '<input id=name>');
const [popup2] = await Promise.all([ const [popup2] = await Promise.all([
page.context().waitForEvent('page'), page.context().waitForEvent('page'),
page.evaluate(`window.open('about:blank')`) page.evaluate(`window.open('about:blank')`)
]); ]);
await recorder.setPageContentAndWait(popup2, '<input id=name>'); await recorder.setPageContentAndWait(popup2, '<input id=name>');
await popup1.type('input', 'TextA'); await popup1.type('input', 'TextA');
await recorder.waitForOutput('TextA'); await recorder.waitForOutput('TextA');
await popup2.type('input', 'TextB'); await popup2.type('input', 'TextB');
await recorder.waitForOutput('TextB'); await recorder.waitForOutput('TextB');
expect(recorder.output()).toContain(`await page1.fill('input[id="name"]', 'TextA');`); expect(recorder.output()).toContain(`await page1.fill('input[id="name"]', 'TextA');`);
expect(recorder.output()).toContain(`await page2.fill('input[id="name"]', 'TextB');`); expect(recorder.output()).toContain(`await page2.fill('input[id="name"]', 'TextB');`);
}); });
it('click should emit events in order', async ({ page, recorder }) => { it('click should emit events in order', async ({ page, recorder }) => {
await recorder.setContentAndWait(` await recorder.setContentAndWait(`
<button id=button> <button id=button>
<script> <script>
button.addEventListener('mousedown', e => console.log(e.type)); button.addEventListener('mousedown', e => console.log(e.type));
button.addEventListener('mouseup', e => console.log(e.type)); button.addEventListener('mouseup', e => console.log(e.type));
button.addEventListener('click', e => console.log(e.type)); button.addEventListener('click', e => console.log(e.type));
</script> </script>
`); `);
const messages: any[] = []; const messages: any[] = [];
page.on('console', message => messages.push(message.text())); page.on('console', message => messages.push(message.text()));
await Promise.all([ await Promise.all([
page.click('button'), page.click('button'),
recorder.waitForOutput('page.click') recorder.waitForOutput('page.click')
]); ]);
expect(messages).toEqual(['mousedown', 'mouseup', 'click']); expect(messages).toEqual(['mousedown', 'mouseup', 'click']);
}); });
it('should update hover model on action', async ({ page, recorder }) => { it('should update hover model on action', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name='updated'"></input>`); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name='updated'"></input>`);
const [ models ] = await Promise.all([ const [ models ] = await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
page.click('input') page.click('input')
]); ]);
expect(models.hovered).toBe('input[name="updated"]'); expect(models.hovered).toBe('input[name="updated"]');
}); });
it('should update active model on action', (test, { browserName, headful }) => { it('should update active model on action', (test, { browserName, headful }) => {
test.fixme(browserName === 'webkit' && !headful); test.fixme(browserName === 'webkit' && !headful);
test.fixme(browserName === 'firefox' && !headful); test.fixme(browserName === 'firefox' && !headful);
}, async ({ page, recorder }) => { }, async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name='updated'"></input>`); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name='updated'"></input>`);
const [ models ] = await Promise.all([ const [ models ] = await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
page.click('input') page.click('input')
]); ]);
expect(models.active).toBe('input[name="updated"]'); expect(models.active).toBe('input[name="updated"]');
}); });
it('should check input with chaning id', async ({ page, recorder }) => { it('should check input with chaning id', async ({ page, recorder }) => {
await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name = 'updated'"></input>`); await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="checkbox.name = 'updated'"></input>`);
await Promise.all([ await Promise.all([
recorder.waitForActionPerformed(), recorder.waitForActionPerformed(),
page.click('input[id=checkbox]') page.click('input[id=checkbox]')
]); ]);
});
}); });