fix(inspector): fix the wait for event error rendering (#5517)

This commit is contained in:
Pavel Feldman 2021-02-20 14:36:19 -08:00 committed by GitHub
parent eb3efb3089
commit 6ec77dca9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 10 deletions

View File

@ -75,6 +75,7 @@ export class InspectorController implements InstrumentationListener {
case 'after':
const originalMetadata = this._waitOperations.get(info.waitId)!;
originalMetadata.endTime = metadata.endTime;
originalMetadata.error = info.error;
this._waitOperations.delete(info.waitId);
metadata = originalMetadata;
break;

View File

@ -447,8 +447,10 @@ export class RecorderSupplement {
selector: metadata.params?.selector,
};
let duration = metadata.endTime ? metadata.endTime - metadata.startTime : undefined;
if (duration && metadata.pauseStartTime && metadata.pauseEndTime)
if (typeof duration === 'number' && metadata.pauseStartTime && metadata.pauseEndTime) {
duration -= (metadata.pauseEndTime - metadata.pauseStartTime);
duration = Math.max(duration, 0);
}
logs.push({
id: metadata.id,
messages: metadata.log,

View File

@ -163,6 +163,23 @@ describe('pause', (suite, { mode }) => {
await scriptPromise;
});
it('should highlight waitForEvent', async ({page, recorderPageGetter}) => {
await page.setContent('<button onclick="console.log(1)">Submit</button>');
const scriptPromise = (async () => {
await page.pause();
await Promise.all([
page.waitForEvent('console'),
page.click('button'),
]);
})();
const recorderPage = await recorderPageGetter();
await recorderPage.click('[title="Step over"]');
await recorderPage.waitForSelector('.source-line-paused:has-text("page.click")');
await recorderPage.waitForSelector('.source-line-running:has-text("page.waitForEvent")');
await recorderPage.click('[title="Resume"]');
await scriptPromise;
});
it('should populate log with waitForEvent', async ({page, recorderPageGetter}) => {
await page.setContent('<button onclick="console.log(1)">Submit</button>');
const scriptPromise = (async () => {
@ -178,7 +195,7 @@ describe('pause', (suite, { mode }) => {
await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")');
expect(await sanitizeLog(recorderPage)).toEqual([
'page.pause- XXms',
'page.waitForEvent(console)- XXms',
'page.waitForEvent(console)',
'page.click(button)- XXms',
'page.pause',
]);
@ -200,12 +217,36 @@ describe('pause', (suite, { mode }) => {
'page.isChecked(button)- XXms',
'checking \"checked\" state of \"button\"',
'selector resolved to <button onclick=\"console.log(1)\">Submit</button>',
'Not a checkbox or radio button',
'error: Not a checkbox or radio button',
]);
const error = await scriptPromise;
expect(error.message).toContain('Not a checkbox or radio button');
});
it('should populate log with error in waitForEvent', async ({page, recorderPageGetter}) => {
await page.setContent('<button>Submit</button>');
const scriptPromise = (async () => {
await page.pause();
await Promise.all([
page.waitForEvent('console', { timeout: 1 }),
page.click('button'),
]);
})().catch(() => {});
const recorderPage = await recorderPageGetter();
await recorderPage.click('[title="Step over"]');
await recorderPage.waitForSelector('.source-line-paused:has-text("page.click")');
await recorderPage.waitForSelector('.source-line-error:has-text("page.waitForEvent")');
await recorderPage.click('[title="Resume"]');
expect(await sanitizeLog(recorderPage)).toEqual([
'page.pause- XXms',
'page.waitForEvent(console)',
'waiting for event \"console\"',
'error: Timeout while waiting for event \"console\"',
'page.click(button)- XXms',
]);
await scriptPromise;
});
it('should pause on page close', async ({ page, recorderPageGetter }) => {
const scriptPromise = (async () => {
await page.pause();
@ -234,13 +275,11 @@ describe('pause', (suite, { mode }) => {
async function sanitizeLog(recorderPage: Page): Promise<string[]> {
const results = [];
for (const entry of await recorderPage.$$('.call-log-call')) {
const header = await (await (await entry.$('.call-log-call-header')).textContent()).replace(/— \d+(\.\d+)?(ms|s)/, '- XXms');
results.push(header);
results.push(...await entry.$$eval('.call-log-message', ee => ee.map(e => e.textContent)));
const errorElement = await entry.$('.call-log-error');
const error = errorElement ? await errorElement.textContent() : undefined;
if (error)
results.push(error);
const header = (await (await entry.$('.call-log-call-header')).textContent()).replace(/— [\d.]+(ms|s)/, '- XXms');
results.push(header.replace(/page\.waitForEvent\(console\).*/, 'page.waitForEvent(console)'));
results.push(...await entry.$$eval('.call-log-message', ee => ee.map(e => {
return (e.classList.contains('error') ? 'error: ' : '') + e.textContent;
})));
}
return results;
}