mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-02 23:27:28 +03:00
test: add more tests for retarget behavior (#16513)
This commit is contained in:
Dmitry Gozman
GitHub
parent
32adf50e65
commit
0d3b3d08ab
@ -858,3 +858,29 @@ it('should not hang when frame is detached', async ({ page, server, mode }) => {
|
||||
expect(error).toBeTruthy();
|
||||
expect(error.message).toMatch(/frame got detached|Frame was detached/);
|
||||
});
|
||||
|
||||
it('should climb dom for inner label with pointer-events:none', async ({ page }) => {
|
||||
await page.setContent('<button onclick="javascript:window.__CLICKED=true;"><label style="pointer-events:none">Click target</label></button>');
|
||||
await page.click('text=Click target');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('should climb up to [role=button]', async ({ page }) => {
|
||||
await page.setContent('<div role=button onclick="javascript:window.__CLICKED=true;"><div style="pointer-events:none"><span><div>Click target</div></span></div>');
|
||||
await page.click('text=Click target');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('should climb up to a anchor', async ({ page }) => {
|
||||
// For Firefox its not allowed to return anything: https://bugzilla.mozilla.org/show_bug.cgi?id=1392046
|
||||
// Note the intermediate div - it is necessary, otherwise <a><non-clickable/></a> is not recognized as a clickable link.
|
||||
await page.setContent(`<a href="javascript:(function(){window.__CLICKED=true})()" id="outer"><div id="intermediate"><div id="inner" style="pointer-events: none">Inner</div></div></a>`);
|
||||
await page.click('#inner');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('should climb up to a [role=link]', async ({ page }) => {
|
||||
await page.setContent(`<div role=link onclick="javascript:window.__CLICKED=true;" id="outer"><div id="inner" style="pointer-events: none">Inner</div></div>`);
|
||||
await page.click('#inner');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
@ -71,52 +71,6 @@ it('should wait for enclosing enabled button', async ({ page, server }) => {
|
||||
await promise;
|
||||
});
|
||||
|
||||
it('inputValue should work on label', async ({ page, server }) => {
|
||||
await page.setContent(`<label><input type=text></input></label>`);
|
||||
await page.fill('input', 'foo');
|
||||
expect(await page.locator('label').inputValue()).toBe('foo');
|
||||
});
|
||||
|
||||
it('should get value of input with label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target>Fill me</label><input id=target value="some value">`);
|
||||
expect(await page.inputValue('text=Fill me')).toBe('some value');
|
||||
await expect(page.locator('text=Fill me')).toHaveValue('some value');
|
||||
});
|
||||
|
||||
it('should get value of input with span inside the label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target><span>Fill me</span></label><input id=target value="some value">`);
|
||||
expect(await page.inputValue('text=Fill me')).toBe('some value');
|
||||
await expect(page.locator('text=Fill me')).toHaveValue('some value');
|
||||
});
|
||||
|
||||
it('should get value of textarea with label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target>Fill me</label><textarea id=target>hey</textarea>`);
|
||||
expect(await page.inputValue('text=Fill me')).toBe('hey');
|
||||
await expect(page.locator('text=Fill me')).toHaveValue('hey');
|
||||
|
||||
await page.fill('textarea', 'Look at this');
|
||||
expect(await page.inputValue('text=Fill me')).toBe('Look at this');
|
||||
await expect(page.locator('text=Fill me')).toHaveValue('Look at this');
|
||||
});
|
||||
|
||||
it('should check the box by label', async ({ page }) => {
|
||||
await page.setContent(`<label for='checkbox'><input id='checkbox' type='checkbox'></input></label>`);
|
||||
await page.check('label');
|
||||
expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true);
|
||||
});
|
||||
|
||||
it('should check the box outside label', async ({ page }) => {
|
||||
await page.setContent(`<label for='checkbox'>Text</label><div><input id='checkbox' type='checkbox'></input></div>`);
|
||||
await page.check('label');
|
||||
expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true);
|
||||
});
|
||||
|
||||
it('should check the box inside label w/o id', async ({ page }) => {
|
||||
await page.setContent(`<label>Text<span><input id='checkbox' type='checkbox'></input></span></label>`);
|
||||
await page.check('label');
|
||||
expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true);
|
||||
});
|
||||
|
||||
it('should check the box outside shadow dom label', async ({ page }) => {
|
||||
await page.setContent('<div></div>');
|
||||
await page.$eval('div', div => {
|
||||
@ -134,86 +88,294 @@ it('should check the box outside shadow dom label', async ({ page }) => {
|
||||
expect(await page.$eval('input', input => input.checked)).toBe(true);
|
||||
});
|
||||
|
||||
it('click should climb dom for inner label with pointer-events:none', async ({ page }) => {
|
||||
await page.setContent('<button onclick="javascript:window.__CLICKED=true;"><label style="pointer-events:none">Click target</label></button>');
|
||||
await page.click('text=Click target');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('click should climb up to [role=button]', async ({ page }) => {
|
||||
await page.setContent('<div role=button onclick="javascript:window.__CLICKED=true;"><div style="pointer-events:none"><span><div>Click target</div></span></div>');
|
||||
await page.click('text=Click target');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('click should climb up to a anchor', async ({ page }) => {
|
||||
// For Firefox its not allowed to return anything: https://bugzilla.mozilla.org/show_bug.cgi?id=1392046
|
||||
// Note the intermediate div - it is necessary, otherwise <a><non-clickable/></a> is not recognized as a clickable link.
|
||||
await page.setContent(`<a href="javascript:(function(){window.__CLICKED=true})()" id="outer"><div id="intermediate"><div id="inner" style="pointer-events: none">Inner</div></div></a>`);
|
||||
await page.click('#inner');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
it('click should climb up to a [role=link]', async ({ page }) => {
|
||||
await page.setContent(`<div role=link onclick="javascript:window.__CLICKED=true;" id="outer"><div id="inner" style="pointer-events: none">Inner</div></div>`);
|
||||
await page.click('#inner');
|
||||
expect(await page.evaluate('__CLICKED')).toBe(true);
|
||||
});
|
||||
|
||||
|
||||
it('should fill input with label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target>Fill me</label><input id=target>`);
|
||||
await page.fill('text=Fill me', 'some value');
|
||||
expect(await page.$eval('input', input => input.value)).toBe('some value');
|
||||
});
|
||||
|
||||
it('should fill input with label 2', async ({ page }) => {
|
||||
await page.setContent(`<label>Fill me<input id=target></label>`);
|
||||
await page.fill('text=Fill me', 'some value');
|
||||
expect(await page.$eval('input', input => input.value)).toBe('some value');
|
||||
});
|
||||
|
||||
it('should fill input with span inside the label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target><span>Fill me</span></label><input id=target>`);
|
||||
await page.fill('text=Fill me', 'some value');
|
||||
expect(await page.$eval('input', input => input.value)).toBe('some value');
|
||||
});
|
||||
|
||||
it('should fill input inside the label', async ({ page }) => {
|
||||
await page.setContent(`<label><input id=target></label>`);
|
||||
await page.fill('input', 'some value');
|
||||
expect(await page.$eval('input', input => input.value)).toBe('some value');
|
||||
});
|
||||
|
||||
it('should fill textarea with label', async ({ page }) => {
|
||||
await page.setContent(`<label for=target>Fill me</label><textarea id=target>hey</textarea>`);
|
||||
await page.fill('text=Fill me', 'some value');
|
||||
expect(await page.$eval('textarea', textarea => textarea.value)).toBe('some value');
|
||||
});
|
||||
|
||||
it('should selectOption with sibling label', async ({ page, server }) => {
|
||||
await page.setContent(`<label for=pet-select>Choose a pet</label>
|
||||
<select id='pet-select'>
|
||||
<option value='dog'>Dog</option>
|
||||
<option value='cat'>Cat</option>
|
||||
</select>`);
|
||||
await page.selectOption('text=Choose a pet', 'cat');
|
||||
expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat');
|
||||
});
|
||||
|
||||
it('should selectOption with outer label', async ({ page, server }) => {
|
||||
await page.setContent(`<label for=pet-select>Choose a pet
|
||||
<select id='pet-select'>
|
||||
<option value='dog'>Dog</option>
|
||||
<option value='cat'>Cat</option>
|
||||
</select></label>`);
|
||||
await page.selectOption('text=Choose a pet', 'cat');
|
||||
expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat');
|
||||
});
|
||||
|
||||
it('setInputFiles should work with label', async ({ page, asset }) => {
|
||||
await page.setContent(`<label for=target>Choose a file</label><input id=target type=file>`);
|
||||
await page.setInputFiles('text=Choose a file', asset('file-to-upload.txt'));
|
||||
expect(await page.$eval('input', input => input.files.length)).toBe(1);
|
||||
expect(await page.$eval('input', input => input.files[0].name)).toBe('file-to-upload.txt');
|
||||
});
|
||||
|
||||
type Options = { disabled?: boolean, hidden?: boolean, readonly?: boolean };
|
||||
const optionsToAttributes = (options: Options | undefined) => ` ${options?.disabled ? 'disabled' : ''} ${options?.hidden ? 'hidden' : ''} ${options?.readonly ? 'readonly' : ''} `;
|
||||
const domInLabel = (dom: string, options?: Options) => `<label ${optionsToAttributes(options)}>Text ${dom}</label>`;
|
||||
const domLabelFor = (dom: string, options?: Options) => `<label ${optionsToAttributes(options)} for="target"><h1>Text</h1></label>${dom}`;
|
||||
const domStandalone = (dom: string) => dom;
|
||||
const domInButton = (dom: string, options?: Options) => `<button ${optionsToAttributes(options)}>Button ${dom}</button>`;
|
||||
const domInLink = (dom: string, options?: Options) => `<button ${optionsToAttributes(options)}>Button ${dom}</button>`;
|
||||
|
||||
it('enabled/disabled retargeting', async ({ page, asset }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<input id=target>`), enabled: true, locator: 'label' },
|
||||
{ dom: domLabelFor(`<input id=target>`), enabled: true, locator: 'label' },
|
||||
{ dom: domStandalone(`<input id=target>`), enabled: true, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`), enabled: true, locator: 'input' },
|
||||
{ dom: domInLink(`<input id=target>`), enabled: true, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`, { disabled: true }), enabled: true, locator: 'input' },
|
||||
|
||||
{ dom: domInLabel(`<input id=target disabled>`), enabled: false, locator: 'label' },
|
||||
{ dom: domLabelFor(`<input id=target disabled>`), enabled: false, locator: 'label' },
|
||||
{ dom: domStandalone(`<input id=target disabled>`), enabled: false, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target disabled>`), enabled: false, locator: 'input' },
|
||||
{ dom: domInLink(`<input id=target disabled>`), enabled: false, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target disabled>`, { disabled: true }), enabled: false, locator: 'input' },
|
||||
];
|
||||
for (const { dom, enabled, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" should be enabled=${enabled}`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
expect(await target.isEnabled()).toBe(enabled);
|
||||
expect(await target.isDisabled()).toBe(!enabled);
|
||||
if (enabled) {
|
||||
await expect(target).toBeEnabled();
|
||||
await expect(target).not.toBeDisabled();
|
||||
await handle.waitForElementState('enabled');
|
||||
} else {
|
||||
await expect(target).not.toBeEnabled();
|
||||
await expect(target).toBeDisabled();
|
||||
await handle.waitForElementState('disabled');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('visible/hidden retargeting', async ({ page, asset }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<span id=target>content</span>`), visible: true, locator: 'label' },
|
||||
{ dom: domInLabel(`<span id=target hidden>content</span>`), visible: true, locator: 'label' },
|
||||
{ dom: domLabelFor(`<span id=target>content</span>`), visible: true, locator: 'label' },
|
||||
{ dom: domLabelFor(`<span id=target hidden>content</span>`), visible: true, locator: 'label' },
|
||||
{ dom: domStandalone(`<span id=target>content</span>`), visible: true, locator: 'span' },
|
||||
{ dom: domInButton(`<span id=target>content</span>`), visible: true, locator: 'span' },
|
||||
{ dom: domInLink(`<span id=target>content</span>`), visible: true, locator: 'span' },
|
||||
|
||||
{ dom: domInLabel(`<span id=target>content</span>`, { hidden: true }), visible: false, locator: 'label' },
|
||||
{ dom: domLabelFor(`<span id=target>content</span>`, { hidden: true }), visible: false, locator: 'label' },
|
||||
{ dom: domStandalone(`<span id=target hidden>content</span>`), visible: false, locator: 'span' },
|
||||
{ dom: domInButton(`<span id=target hidden>content</span>`), visible: false, locator: 'span' },
|
||||
{ dom: domInButton(`<span id=target>content</span>`, { hidden: true }), visible: false, locator: 'span' },
|
||||
{ dom: domInLink(`<span id=target hidden>content</span>`), visible: false, locator: 'span' },
|
||||
{ dom: domInLink(`<span id=target>content</span>`, { hidden: true }), visible: false, locator: 'span' },
|
||||
];
|
||||
for (const { dom, visible, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" should be visible=${visible}`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
expect(await target.isVisible()).toBe(visible);
|
||||
expect(await target.isHidden()).toBe(!visible);
|
||||
if (visible) {
|
||||
await expect(target).toBeVisible();
|
||||
await expect(target).not.toBeHidden();
|
||||
await handle.waitForElementState('visible');
|
||||
} else {
|
||||
await expect(target).not.toBeVisible();
|
||||
await expect(target).toBeHidden();
|
||||
await handle.waitForElementState('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('editable retargeting', async ({ page, asset }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<input id=target>`), editable: true, locator: 'label' },
|
||||
{ dom: domLabelFor(`<input id=target>`), editable: true, locator: 'label' },
|
||||
{ dom: domStandalone(`<input id=target>`), editable: true, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`), editable: true, locator: 'input' },
|
||||
{ dom: domInLink(`<input id=target>`), editable: true, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`, { readonly: true }), editable: true, locator: 'input' },
|
||||
|
||||
{ dom: domInLabel(`<input id=target readonly>`), editable: false, locator: 'label' },
|
||||
{ dom: domLabelFor(`<input id=target readonly>`), editable: false, locator: 'label' },
|
||||
{ dom: domStandalone(`<input id=target readonly>`), editable: false, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target readonly>`), editable: false, locator: 'input' },
|
||||
{ dom: domInLink(`<input id=target readonly>`), editable: false, locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target readonly>`, { readonly: true }), editable: false, locator: 'input' },
|
||||
];
|
||||
for (const { dom, editable, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" should be editable=${editable}`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
expect(await target.isEditable()).toBe(editable);
|
||||
if (editable) {
|
||||
await expect(target).toBeEditable();
|
||||
await handle.waitForElementState('editable');
|
||||
} else {
|
||||
await expect(target).not.toBeEditable();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('input value retargeting', async ({ page, browserName }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<input id=target>`), locator: 'label' },
|
||||
{ dom: domLabelFor(`<input id=target>`), locator: 'label' },
|
||||
{ dom: domStandalone(`<input id=target>`), locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`), locator: 'input' },
|
||||
{ dom: domInLink(`<input id=target>`), locator: 'input' },
|
||||
{ dom: domInButton(`<input id=target>`), locator: 'input' },
|
||||
];
|
||||
for (const { dom, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" input value`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
|
||||
expect(await target.inputValue()).toBe('');
|
||||
expect(await handle.inputValue()).toBe('');
|
||||
await expect(target).toHaveValue('');
|
||||
|
||||
await target.fill('foo');
|
||||
expect(await target.inputValue()).toBe('foo');
|
||||
expect(await handle.inputValue()).toBe('foo');
|
||||
await expect(target).toHaveValue('foo');
|
||||
|
||||
await page.$eval('#target', (input: HTMLInputElement) => input.value = 'bar');
|
||||
expect(await target.inputValue()).toBe('bar');
|
||||
expect(await handle.inputValue()).toBe('bar');
|
||||
await expect(target).toHaveValue('bar');
|
||||
|
||||
await target.selectText();
|
||||
if (browserName === 'firefox') {
|
||||
expect(await page.locator('#target').evaluate((el: HTMLInputElement) => el.selectionStart)).toBe(0);
|
||||
expect(await page.locator('#target').evaluate((el: HTMLInputElement) => el.selectionEnd)).toBe(3);
|
||||
} else {
|
||||
expect(await page.evaluate(() => window.getSelection().toString())).toBe('bar');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it.fixme('selection retargeting', async ({ page, browserName }) => {
|
||||
const cases = [
|
||||
{ dom: domStandalone(`<div contenteditable id=target>content</div>`), locator: 'div' },
|
||||
{ dom: domInButton(`<div contenteditable id=target>content</div>`), locator: 'div' },
|
||||
{ dom: domInLink(`<div contenteditable id=target>content</div>`), locator: 'div' },
|
||||
{ dom: domInButton(`<div contenteditable id=target>content</div>`), locator: 'div' },
|
||||
];
|
||||
for (const { dom, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" text selection`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
|
||||
expect(await target.isEditable()).toBe(true);
|
||||
expect(await handle.isEditable()).toBe(true);
|
||||
await expect(page.locator('#target')).toHaveText('content');
|
||||
|
||||
await target.fill('foo');
|
||||
await expect(page.locator('#target')).toHaveText('foo');
|
||||
|
||||
await target.selectText();
|
||||
if (browserName === 'firefox') {
|
||||
expect(await page.$eval('#target', target => {
|
||||
const selection = window.getSelection();
|
||||
return selection.anchorNode === target && selection.focusNode === target;
|
||||
})).toBe(true);
|
||||
} else {
|
||||
expect(await page.evaluate(() => window.getSelection().toString())).toBe('foo');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('select options retargeting', async ({ page }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'label' },
|
||||
{ dom: domLabelFor(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'label' },
|
||||
{ dom: domStandalone(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'select' },
|
||||
{ dom: domInButton(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'select' },
|
||||
{ dom: domInLink(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'select' },
|
||||
{ dom: domInButton(`<select id=target multiple><option value=dog selected>Dog</option><option value=cat>Cat</option></select>`), locator: 'select' },
|
||||
];
|
||||
for (const { dom, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" select option`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
const handle = await page.$(locator);
|
||||
|
||||
expect(await target.inputValue()).toBe('dog');
|
||||
expect(await handle.inputValue()).toBe('dog');
|
||||
await expect(target).toHaveValue('dog');
|
||||
await expect(target).toHaveValues(['dog']);
|
||||
|
||||
await target.selectOption('cat');
|
||||
expect(await target.inputValue()).toBe('cat');
|
||||
expect(await handle.inputValue()).toBe('cat');
|
||||
await expect(target).toHaveValue('cat');
|
||||
await expect(target).toHaveValues(['cat']);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('direct actions retargeting', async ({ page }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<div>content</div><input id=target value=oh>`), locator: 'div' },
|
||||
{ dom: domLabelFor(`<div>content</div><input id=target value=oh>`), locator: 'div' },
|
||||
{ dom: domStandalone(`<div>content</div>`), locator: 'div' },
|
||||
{ dom: domInButton(`<div>content</div>`), locator: 'div' },
|
||||
{ dom: domInLink(`<div>content</div>`), locator: 'div' },
|
||||
{ dom: domInButton(`<div>content</div>`), locator: 'div' },
|
||||
];
|
||||
for (const { dom, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" direct actions`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
|
||||
expect(await target.innerText()).toBe('content');
|
||||
expect(await target.textContent()).toBe('content');
|
||||
await expect(target).toHaveText('content');
|
||||
await expect(target).toContainText('content');
|
||||
await expect(target).not.toBeFocused();
|
||||
await expect(target).toHaveCount(1);
|
||||
|
||||
await page.$eval('div', div => (div as any).foo = 'bar');
|
||||
await expect(target).toHaveJSProperty('foo', 'bar');
|
||||
|
||||
await page.$eval('div', div => div.classList.add('cls'));
|
||||
await expect(target).toHaveClass('cls');
|
||||
|
||||
await page.$eval('div', div => div.id = 'myid');
|
||||
await expect(target).toHaveId('myid');
|
||||
await expect(target).toHaveAttribute('id', 'myid');
|
||||
expect(await target.getAttribute('id')).toBe('myid');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it('check retargeting', async ({ page, asset }) => {
|
||||
const cases = [
|
||||
{ dom: domInLabel(`<input type=checkbox id=target>`), locator: 'label' },
|
||||
{ dom: domLabelFor(`<input type=checkbox id=target>`), locator: 'label' },
|
||||
{ dom: domStandalone(`<input type=checkbox id=target>`), locator: 'input' },
|
||||
{ dom: domInButton(`<input type=checkbox id=target>`), locator: 'input' },
|
||||
{ dom: domInLink(`<input type=checkbox id=target>`), locator: 'input' },
|
||||
{ dom: domInButton(`<input type=checkbox id=target>`), locator: 'input' },
|
||||
];
|
||||
for (const { dom, locator } of cases) {
|
||||
await it.step(`"${locator}" in "${dom}" check`, async () => {
|
||||
await page.setContent(dom);
|
||||
const target = page.locator(locator);
|
||||
expect(await target.isChecked()).toBe(false);
|
||||
await expect(target).not.toBeChecked();
|
||||
await expect(target).toBeChecked({ checked: false });
|
||||
|
||||
await page.$eval('input', (input: HTMLInputElement) => input.checked = true);
|
||||
expect(await target.isChecked()).toBe(true);
|
||||
await expect(target).toBeChecked();
|
||||
await expect(target).toBeChecked({ checked: true });
|
||||
|
||||
await target.uncheck();
|
||||
expect(await page.$eval('input', (input: HTMLInputElement) => input.checked)).toBe(false);
|
||||
|
||||
await target.check();
|
||||
expect(await page.$eval('input', (input: HTMLInputElement) => input.checked)).toBe(true);
|
||||
|
||||
await target.setChecked(false);
|
||||
expect(await page.$eval('input', (input: HTMLInputElement) => input.checked)).toBe(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user