2021-11-04 12:28:35 -08:00
|
|
|
/**
|
|
|
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
|
|
|
*
|
|
|
|
|
* 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.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { Page } from 'playwright-core';
|
|
|
|
|
import { test as it, expect } from './pageTest';
|
|
|
|
|
|
|
|
|
|
async function routeIframe(page: Page) {
|
|
|
|
|
await page.route('**/empty.html', route => {
|
|
|
|
|
route.fulfill({
|
|
|
|
|
body: '<iframe src="iframe.html"></iframe>',
|
|
|
|
|
contentType: 'text/html'
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
});
|
|
|
|
|
await page.route('**/iframe.html', route => {
|
|
|
|
|
route.fulfill({
|
|
|
|
|
body: `
|
|
|
|
|
<html>
|
|
|
|
|
<div>
|
|
|
|
|
<button>Hello iframe</button>
|
|
|
|
|
<iframe src="iframe-2.html"></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<span>1</span>
|
|
|
|
|
<span>2</span>
|
|
|
|
|
</html>`,
|
|
|
|
|
contentType: 'text/html'
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
});
|
|
|
|
|
await page.route('**/iframe-2.html', route => {
|
|
|
|
|
route.fulfill({
|
|
|
|
|
body: '<html><button>Hello nested iframe</button></html>',
|
|
|
|
|
contentType: 'text/html'
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for iframe', async ({ page, server }) => {
|
2021-11-04 12:28:35 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> button');
|
2021-11-04 12:28:35 -08:00
|
|
|
await button.waitFor();
|
|
|
|
|
expect(await button.innerText()).toBe('Hello iframe');
|
|
|
|
|
await expect(button).toHaveText('Hello iframe');
|
|
|
|
|
await button.click();
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for iframe (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = await body.waitForSelector('iframe >> control=enter-frame >> button');
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(await button.innerText()).toBe('Hello iframe');
|
|
|
|
|
expect(await button.textContent()).toBe('Hello iframe');
|
|
|
|
|
await button.click();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should work for nested iframe', async ({ page, server }) => {
|
2021-11-04 12:28:35 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> iframe >> control=enter-frame >> button');
|
2021-11-04 12:28:35 -08:00
|
|
|
await button.waitFor();
|
|
|
|
|
expect(await button.innerText()).toBe('Hello nested iframe');
|
|
|
|
|
await expect(button).toHaveText('Hello nested iframe');
|
|
|
|
|
await button.click();
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for nested iframe (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = await body.waitForSelector('iframe >> control=enter-frame >> iframe >> control=enter-frame >> button');
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(await button.innerText()).toBe('Hello nested iframe');
|
|
|
|
|
expect(await button.textContent()).toBe('Hello nested iframe');
|
|
|
|
|
await button.click();
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-04 12:28:35 -08:00
|
|
|
it('should work for $ and $$', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const element = await page.$('iframe >> control=enter-frame >> button');
|
2021-11-04 12:28:35 -08:00
|
|
|
expect(await element.textContent()).toBe('Hello iframe');
|
2021-11-08 09:58:24 -08:00
|
|
|
const elements = await page.$$('iframe >> control=enter-frame >> span');
|
2021-11-04 12:28:35 -08:00
|
|
|
expect(elements).toHaveLength(2);
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 15:36:01 -08:00
|
|
|
it('$ should not wait for frame', async ({ page, server }) => {
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
expect(await page.$('iframe >> control=enter-frame >> canvas')).toBeFalsy();
|
2021-11-05 15:36:01 -08:00
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
expect(await body.$('iframe >> control=enter-frame >> canvas')).toBeFalsy();
|
2021-11-05 15:36:01 -08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('$$ should not wait for frame', async ({ page, server }) => {
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
expect(await page.$$('iframe >> control=enter-frame >> canvas')).toHaveLength(0);
|
2021-11-05 15:36:01 -08:00
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
expect(await body.$$('iframe >> control=enter-frame >> canvas')).toHaveLength(0);
|
2021-11-05 15:36:01 -08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('$eval should throw for missing frame', async ({ page, server }) => {
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
{
|
2021-11-08 09:58:24 -08:00
|
|
|
const error = await page.$eval('iframe >> control=enter-frame >> canvas', e => 1).catch(e => e);
|
2021-11-05 15:36:01 -08:00
|
|
|
expect(error.message).toContain('Error: failed to find element matching selector');
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const error = await body.$eval('iframe >> control=enter-frame >> canvas', e => 1).catch(e => e);
|
2021-11-05 15:36:01 -08:00
|
|
|
expect(error.message).toContain('Error: failed to find element matching selector');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('$$eval should throw for missing frame', async ({ page, server }) => {
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
{
|
2021-11-08 09:58:24 -08:00
|
|
|
const error = await page.$$eval('iframe >> control=enter-frame >> canvas', e => 1).catch(e => e);
|
2021-11-05 15:36:01 -08:00
|
|
|
expect(error.message).toContain('Error: failed to find frame for selector');
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const error = await body.$$eval('iframe >> control=enter-frame >> canvas', e => 1).catch(e => e);
|
2021-11-05 15:36:01 -08:00
|
|
|
expect(error.message).toContain('Error: failed to find frame for selector');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for $ and $$ (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const element = await body.$('iframe >> control=enter-frame >> button');
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(await element.textContent()).toBe('Hello iframe');
|
2021-11-08 09:58:24 -08:00
|
|
|
const elements = await body.$$('iframe >> control=enter-frame >> span');
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(elements).toHaveLength(2);
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-04 12:28:35 -08:00
|
|
|
it('should work for $eval', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const value = await page.$eval('iframe >> control=enter-frame >> button', b => b.nodeName);
|
2021-11-04 12:28:35 -08:00
|
|
|
expect(value).toBe('BUTTON');
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for $eval (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const value = await body.$eval('iframe >> control=enter-frame >> button', b => b.nodeName);
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(value).toBe('BUTTON');
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-04 12:28:35 -08:00
|
|
|
it('should work for $$eval', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const value = await page.$$eval('iframe >> control=enter-frame >> span', ss => ss.map(s => s.textContent));
|
2021-11-04 12:28:35 -08:00
|
|
|
expect(value).toEqual(['1', '2']);
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('should work for $$eval (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const value = await body.$$eval('iframe >> control=enter-frame >> span', ss => ss.map(s => s.textContent));
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(value).toEqual(['1', '2']);
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-08 09:58:24 -08:00
|
|
|
it('should not allow dangling enter-frame', async ({ page, server }) => {
|
2021-11-04 12:28:35 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame');
|
2021-11-04 12:28:35 -08:00
|
|
|
const error = await button.click().catch(e => e);
|
|
|
|
|
expect(error.message).toContain('Selector cannot end with');
|
2021-11-08 09:58:24 -08:00
|
|
|
expect(error.message).toContain('iframe >> control=enter-frame');
|
2021-11-04 12:28:35 -08:00
|
|
|
});
|
|
|
|
|
|
2021-11-08 09:58:24 -08:00
|
|
|
it('should not allow leading enter-frame', async ({ page, server }) => {
|
2021-11-05 10:06:04 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const error = await page.waitForSelector('control=enter-frame >> button').catch(e => e);
|
2021-11-05 10:06:04 -08:00
|
|
|
expect(error.message).toContain('Selector cannot start with');
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-08 09:58:24 -08:00
|
|
|
it('should not allow capturing before enter-frame', async ({ page, server }) => {
|
2021-11-04 12:28:35 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('*css=iframe >> control=enter-frame >> div');
|
2021-11-04 12:28:35 -08:00
|
|
|
const error = await await button.click().catch(e => e);
|
|
|
|
|
expect(error.message).toContain('Can not capture the selector before diving into the frame');
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-08 09:58:24 -08:00
|
|
|
it('should capture after the enter-frame', async ({ page, server }) => {
|
2021-11-04 12:28:35 -08:00
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const div = page.locator('iframe >> control=enter-frame >> *css=div >> button');
|
2021-11-04 12:28:35 -08:00
|
|
|
expect(await div.innerHTML()).toContain('<button>');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should click in lazy iframe', async ({ page, server }) => {
|
|
|
|
|
await page.route('**/iframe.html', route => {
|
|
|
|
|
route.fulfill({
|
|
|
|
|
body: '<html><button>Hello iframe</button></html>',
|
|
|
|
|
contentType: 'text/html'
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// empty pge
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
|
|
|
|
|
// add blank iframe
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
page.evaluate(() => {
|
|
|
|
|
const iframe = document.createElement('iframe');
|
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
|
});
|
|
|
|
|
// navigate iframe
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
page.evaluate(() => document.querySelector('iframe').src = 'iframe.html');
|
|
|
|
|
}, 500);
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
|
// Click in iframe
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> button');
|
2021-11-04 12:28:35 -08:00
|
|
|
const [, text] = await Promise.all([
|
|
|
|
|
button.click(),
|
|
|
|
|
button.innerText(),
|
|
|
|
|
expect(button).toHaveText('Hello iframe')
|
|
|
|
|
]);
|
|
|
|
|
expect(text).toBe('Hello iframe');
|
|
|
|
|
});
|
2021-11-05 10:06:04 -08:00
|
|
|
|
|
|
|
|
it('waitFor should survive frame reattach', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> button:has-text("Hello nested iframe")');
|
2021-11-05 10:06:04 -08:00
|
|
|
const promise = button.waitFor();
|
|
|
|
|
await page.locator('iframe').evaluate(e => e.remove());
|
|
|
|
|
await page.evaluate(() => {
|
|
|
|
|
const iframe = document.createElement('iframe');
|
|
|
|
|
iframe.src = 'iframe-2.html';
|
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
|
});
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 15:36:01 -08:00
|
|
|
it('waitForSelector should survive frame reattach (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const promise = body.waitForSelector('iframe >> control=enter-frame >> button:has-text("Hello nested iframe")');
|
2021-11-05 15:36:01 -08:00
|
|
|
await page.locator('iframe').evaluate(e => e.remove());
|
|
|
|
|
await page.evaluate(() => {
|
|
|
|
|
const iframe = document.createElement('iframe');
|
|
|
|
|
iframe.src = 'iframe-2.html';
|
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
|
});
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('waitForSelector should survive iframe navigation (handle)', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const body = await page.$('body');
|
2021-11-08 09:58:24 -08:00
|
|
|
const promise = body.waitForSelector('iframe >> control=enter-frame >> button:has-text("Hello nested iframe")');
|
2021-11-05 15:36:01 -08:00
|
|
|
page.locator('iframe').evaluate(e => (e as HTMLIFrameElement).src = 'iframe-2.html');
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
2021-11-05 10:06:04 -08:00
|
|
|
it('click should survive frame reattach', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> button:has-text("Hello nested iframe")');
|
2021-11-05 10:06:04 -08:00
|
|
|
const promise = button.click();
|
|
|
|
|
await page.locator('iframe').evaluate(e => e.remove());
|
|
|
|
|
await page.evaluate(() => {
|
|
|
|
|
const iframe = document.createElement('iframe');
|
|
|
|
|
iframe.src = 'iframe-2.html';
|
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
|
});
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('click should survive iframe navigation', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('iframe >> control=enter-frame >> button:has-text("Hello nested iframe")');
|
2021-11-05 10:06:04 -08:00
|
|
|
const promise = button.click();
|
|
|
|
|
page.locator('iframe').evaluate(e => (e as HTMLIFrameElement).src = 'iframe-2.html');
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('click should survive navigation', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.PREFIX + '/iframe.html');
|
|
|
|
|
const promise = page.click('button:has-text("Hello nested iframe")');
|
|
|
|
|
await page.waitForTimeout(100);
|
|
|
|
|
await page.goto(server.PREFIX + '/iframe-2.html');
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should fail if element removed while waiting on element handle', async ({ page, server }) => {
|
|
|
|
|
it.fixme();
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.goto(server.PREFIX + '/iframe.html');
|
|
|
|
|
const button = await page.$('button');
|
|
|
|
|
const promise = button.waitForSelector('something');
|
|
|
|
|
await page.waitForTimeout(100);
|
|
|
|
|
await page.evaluate(() => document.body.innerText = '');
|
|
|
|
|
await promise;
|
|
|
|
|
});
|
2021-11-05 15:36:01 -08:00
|
|
|
|
|
|
|
|
it('should non work for non-frame', async ({ page, server }) => {
|
|
|
|
|
await routeIframe(page);
|
|
|
|
|
await page.setContent('<div></div>');
|
2021-11-08 09:58:24 -08:00
|
|
|
const button = page.locator('div >> control=enter-frame >> button');
|
2021-11-05 15:36:01 -08:00
|
|
|
const error = await button.waitFor().catch(e => e);
|
|
|
|
|
expect(error.message).toContain('<div></div>');
|
|
|
|
|
expect(error.message).toContain('<iframe> was expected');
|
|
|
|
|
});
|
