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

fix(tracing): trace frame (#10846)

Browse source
This commit is contained in:
musou1500 2021-12-18 03:43:19 +09:00 committed by GitHub
parent 551c8d1309
commit 7d39d345c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
View file

@ -437,6 +437,8 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
continue;
if (nodeName === 'IFRAME' && (name === 'src' || name === 'sandbox'))
continue;
if (nodeName === 'FRAME' && name === 'src')
continue;
let value = element.attributes[i].value;
if (nodeName === 'META')
value = this.__sanitizeMetaAttribute(name, value, (node as HTMLMetaElement).httpEquiv);

19
packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts
View file

@ -85,12 +85,12 @@ export class SnapshotRenderer {
return { html: '', pageId: snapshot.pageId, frameId: snapshot.frameId, index: this._index };
// Hide the document in order to prevent flickering. We will unhide once script has processed shadow.
const hideAllStyle = '<style>*,*::before,*::after { visibility: hidden }</style>';
const prefix = snapshot.doctype ? `<!DOCTYPE ${snapshot.doctype}>` + hideAllStyle : hideAllStyle;
html = prefix + html + `
<style>*[__playwright_target__="${this.snapshotName}"] { background-color: #6fa8dc7f; }</style>
<script>${snapshotScript()}</script>
`;
const prefix = snapshot.doctype ? `<!DOCTYPE ${snapshot.doctype}>` : '';
html = prefix + [
'<style>*,*::before,*::after { visibility: hidden }</style>',
`<style>*[__playwright_target__="${this.snapshotName}"] { background-color: #6fa8dc7f; }</style>`,
`<script>${snapshotScript()}</script>`
].join('') + html;
return { html, pageId: snapshot.pageId, frameId: snapshot.frameId, index: this._index };
}
@ -184,7 +184,7 @@ function snapshotScript() {
for (const e of root.querySelectorAll(`[${scrollLeftAttribute}]`))
scrollLefts.push(e);
for (const iframe of root.querySelectorAll('iframe')) {
for (const iframe of root.querySelectorAll('iframe, frame')) {
const src = iframe.getAttribute('__playwright_src__');
if (!src) {
iframe.setAttribute('src', 'data:text/html,<body style="background: #ddd"></body>');
@ -221,7 +221,6 @@ function snapshotScript() {
(root as any).adoptedStyleSheets = adoptedSheets;
}
};
visit(document);
const onLoad = () => {
window.removeEventListener('load', onLoad);
@ -252,7 +251,11 @@ function snapshotScript() {
}
document.styleSheets[0].disabled = true;
};
const onDOMContentLoaded = () => visit(document);
window.addEventListener('load', onLoad);
window.addEventListener('DOMContentLoaded', onDOMContentLoaded);
}
const kShadowAttribute = '__playwright_shadow_root_';

34
tests/snapshotter.spec.ts
View file

@ -133,6 +133,32 @@ it.describe('snapshots', () => {
expect((await snapshotter.resourceContentForTest(resource.response.content._sha1)).toString()).toBe('button { color: blue; }');
});
it('should capture frame', async ({ page, server, toImpl, browserName, snapshotter }) => {
it.skip(browserName === 'firefox');
await page.route('**/empty.html', route => {
route.fulfill({
body: '<frameset><frame src="frame.html"></frameset>',
contentType: 'text/html'
}).catch(() => {});
});
await page.route('**/frame.html', route => {
route.fulfill({
body: '<html><button>Hello iframe</button></html>',
contentType: 'text/html'
}).catch(() => {});
});
await page.goto(server.EMPTY_PAGE);
for (let counter = 0; ; ++counter) {
const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter);
const text = distillSnapshot(snapshot).replace(/frame@[^"]+["]/, '<id>"');
if (text === '<FRAMESET><FRAME __playwright_src__=\"/snapshot/<id>\"></FRAME></FRAMESET>')
break;
await page.waitForTimeout(250);
}
});
it('should capture iframe', async ({ page, server, toImpl, browserName, snapshotter }) => {
it.skip(browserName === 'firefox');
@ -151,10 +177,8 @@ it.describe('snapshots', () => {
await page.goto(server.EMPTY_PAGE);
// Marking iframe hierarchy is racy, do not expect snapshot, wait for it.
let counter = 0;
let snapshot: any;
for (; ; ++counter) {
snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter);
for (let counter = 0; ; ++counter) {
const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter);
const text = distillSnapshot(snapshot).replace(/frame@[^"]+["]/, '<id>"');
if (text === '<IFRAME __playwright_src__=\"/snapshot/<id>\"></IFRAME>')
break;
@ -232,7 +256,7 @@ function distillSnapshot(snapshot, distillTarget = true) {
return html
.replace(/<style>\*,\*::before,\*::after { visibility: hidden }<\/style>/, '')
.replace(/<script>[.\s\S]+<\/script>/, '')
.replace(/<style>.*__playwright_target__.*<\/style>/, '')
.replace(/<style>.*__playwright_target__.*?<\/style>/, '')
.replace(/<BASE href="about:blank">/, '')
.replace(/<BASE href="http:\/\/localhost:[\d]+\/empty.html">/, '')
.replace(/<HTML>/, '')