feat(assertions): support toBeVisible({ visible }) (#17207)

This commit is contained in:
Dmitry Gozman 2022-09-09 08:33:23 -07:00 committed by GitHub
parent 9e93913900
commit bca13bc35a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 92 deletions

View File

@ -723,6 +723,9 @@ var locator = Page.Locator(".my-element");
await Expect(locator).ToBeVisibleAsync(); await Expect(locator).ToBeVisibleAsync();
``` ```
### option: LocatorAssertions.toBeVisible.visible
* since: v1.26
- `visible` <[boolean]>
### option: LocatorAssertions.toBeVisible.timeout = %%-js-assertions-timeout-%% ### option: LocatorAssertions.toBeVisible.timeout = %%-js-assertions-timeout-%%
* since: v1.18 * since: v1.18
### option: LocatorAssertions.toBeVisible.timeout = %%-csharp-java-python-assertions-timeout-%% ### option: LocatorAssertions.toBeVisible.timeout = %%-csharp-java-python-assertions-timeout-%%

View File

@ -110,10 +110,11 @@ export function toBeHidden(
export function toBeVisible( export function toBeVisible(
this: ReturnType<Expect['getState']>, this: ReturnType<Expect['getState']>,
locator: LocatorEx, locator: LocatorEx,
options?: { timeout?: number }, options?: { visible?: boolean, timeout?: number },
) { ) {
return toBeTruthy.call(this, 'toBeVisible', locator, 'Locator', async (isNot, timeout, customStackTrace) => { return toBeTruthy.call(this, 'toBeVisible', locator, 'Locator', async (isNot, timeout, customStackTrace) => {
return await locator._expect(customStackTrace, 'to.be.visible', { isNot, timeout }); const visible = !options || options.visible === undefined || options.visible === true;
return await locator._expect(customStackTrace, visible ? 'to.be.visible' : 'to.be.hidden', { isNot, timeout });
}, options); }, options);
} }

View File

@ -3369,6 +3369,8 @@ interface LocatorAssertions {
* Time to retry the assertion for. Defaults to `timeout` in `TestConfig.expect`. * Time to retry the assertion for. Defaults to `timeout` in `TestConfig.expect`.
*/ */
timeout?: number; timeout?: number;
visible?: boolean;
}): Promise<void>; }): Promise<void>;
/** /**

View File

@ -209,105 +209,127 @@ test('not.toBeDisabled div', async ({ page }) => {
await expect(locator).not.toBeDisabled(); await expect(locator).not.toBeDisabled();
}); });
test('toBeVisible', async ({ page }) => { test.describe('toBeVisible', () => {
await page.setContent('<input></input>'); test('default', async ({ page }) => {
const locator = page.locator('input'); await page.setContent('<input></input>');
await expect(locator).toBeVisible(); const locator = page.locator('input');
await expect(locator).toBeVisible();
});
test('with not', async ({ page }) => {
await page.setContent('<button style="display: none">hello</button>');
const locator = page.locator('button');
await expect(locator).not.toBeVisible();
});
test('with visible:true', async ({ page }) => {
await page.setContent('<button>hello</button>');
const locator = page.locator('button');
await expect(locator).toBeVisible({ visible: true });
});
test('with visible:false', async ({ page }) => {
await page.setContent('<button hidden>hello</button>');
const locator = page.locator('button');
await expect(locator).toBeVisible({ visible: false });
});
test('with not and visible:false', async ({ page }) => {
await page.setContent('<button>hello</button>');
const locator = page.locator('button');
await expect(locator).not.toBeVisible({ visible: false });
});
test('eventually', async ({ page }) => {
await page.setContent('<div></div>');
const locator = page.locator('span');
setTimeout(() => {
page.$eval('div', div => div.innerHTML = '<span>Hello</span>').catch(() => {});
}, 0);
await expect(locator).toBeVisible();
});
test('eventually with not', async ({ page }) => {
await page.setContent('<div><span>Hello</span></div>');
const locator = page.locator('span');
setTimeout(() => {
page.$eval('span', span => span.textContent = '').catch(() => {});
}, 0);
await expect(locator).not.toBeVisible();
});
test('fail', async ({ page }) => {
await page.setContent('<button style="display: none"></button>');
const locator = page.locator('button');
const error = await expect(locator).toBeVisible({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <button></button>`);
});
test('fail with not', async ({ page }) => {
await page.setContent('<input></input>');
const locator = page.locator('input');
const error = await expect(locator).not.toBeVisible({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <input/>`);
});
}); });
test('not.toBeVisible', async ({ page }) => { test.describe('toBeHidden', () => {
await page.setContent('<button style="display: none"></button>'); test('default', async ({ page }) => {
const locator = page.locator('button'); await page.setContent('<button style="display: none"></button>');
await expect(locator).not.toBeVisible(); const locator = page.locator('button');
}); await expect(locator).toBeHidden();
});
test('toBeHidden', async ({ page }) => { test('when nothing matches', async ({ page }) => {
await page.setContent('<button style="display: none"></button>'); await page.setContent('<div></div>');
const locator = page.locator('button'); const locator = page.locator('button');
await expect(locator).toBeHidden(); await expect(locator).toBeHidden();
}); });
test('toBeHidden when nothing matches', async ({ page }) => { test('with not', async ({ page }) => {
await page.setContent('<div></div>'); await page.setContent('<input></input>');
const locator = page.locator('button'); const locator = page.locator('input');
await expect(locator).toBeHidden(); await expect(locator).not.toBeHidden();
}); });
test('not.toBeHidden', async ({ page }) => { test('eventually with not', async ({ page }) => {
await page.setContent('<input></input>'); await page.setContent('<div></div>');
const locator = page.locator('input'); const locator = page.locator('span');
await expect(locator).not.toBeHidden(); setTimeout(() => {
}); page.$eval('div', div => div.innerHTML = '<span>Hello</span>').catch(() => {});
}, 0);
await expect(locator).not.toBeHidden();
});
test('toBeVisible eventually', async ({ page }) => { test('eventually', async ({ page }) => {
await page.setContent('<div></div>'); await page.setContent('<div><span>Hello</span></div>');
const locator = page.locator('span'); const locator = page.locator('span');
setTimeout(() => { setTimeout(() => {
page.$eval('div', div => div.innerHTML = '<span>Hello</span>').catch(() => {}); page.$eval('span', span => span.textContent = '').catch(() => {});
}, 0); }, 0);
await expect(locator).toBeVisible(); await expect(locator).toBeHidden();
}); });
test('not.toBeHidden eventually', async ({ page }) => { test('fail', async ({ page }) => {
await page.setContent('<div></div>'); await page.setContent('<input></input>');
const locator = page.locator('span'); const locator = page.locator('input');
setTimeout(() => { const error = await expect(locator).toBeHidden({ timeout: 1000 }).catch(e => e);
page.$eval('div', div => div.innerHTML = '<span>Hello</span>').catch(() => {}); expect(error.message).toContain(`selector resolved to <input/>`);
}, 0); });
await expect(locator).not.toBeHidden();
});
test('not.toBeVisible eventually', async ({ page }) => { test('fail with not', async ({ page }) => {
await page.setContent('<div><span>Hello</span></div>'); await page.setContent('<button style="display: none"></button>');
const locator = page.locator('span'); const locator = page.locator('button');
setTimeout(() => { const error = await expect(locator).not.toBeHidden({ timeout: 1000 }).catch(e => e);
page.$eval('span', span => span.textContent = '').catch(() => {}); expect(error.message).toContain(`selector resolved to <button></button>`);
}, 0); });
await expect(locator).not.toBeVisible();
});
test('toBeHidden eventually', async ({ page }) => { test('fail with not when nothing matching', async ({ page }) => {
await page.setContent('<div><span>Hello</span></div>'); await page.setContent('<div></div>');
const locator = page.locator('span'); const locator = page.locator('button');
setTimeout(() => { const error = await expect(locator).not.toBeHidden({ timeout: 1000 }).catch(e => e);
page.$eval('span', span => span.textContent = '').catch(() => {}); expect(error.message).toContain(`expect.toBeHidden with timeout 1000ms`);
}, 0); });
await expect(locator).toBeHidden();
});
test('toBeVisible fail', async ({ page }) => {
await page.setContent('<button style="display: none"></button>');
const locator = page.locator('button');
const error = await expect(locator).toBeVisible({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <button></button>`);
});
test('not.toBeVisible fail', async ({ page }) => {
await page.setContent('<input></input>');
const locator = page.locator('input');
const error = await expect(locator).not.toBeVisible({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <input/>`);
});
test('toBeHidden fail', async ({ page }) => {
await page.setContent('<input></input>');
const locator = page.locator('input');
const error = await expect(locator).toBeHidden({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <input/>`);
});
test('not.toBeHidden fail', async ({ page }) => {
await page.setContent('<button style="display: none"></button>');
const locator = page.locator('button');
const error = await expect(locator).not.toBeHidden({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`selector resolved to <button></button>`);
});
test('not.toBeHidden fail not matching', async ({ page }) => {
await page.setContent('<div></div>');
const locator = page.locator('button');
const error = await expect(locator).not.toBeHidden({ timeout: 1000 }).catch(e => e);
expect(error.message).toContain(`expect.toBeHidden with timeout 1000ms`);
}); });
test('toBeFocused', async ({ page }) => { test('toBeFocused', async ({ page }) => {

View File

@ -248,6 +248,9 @@ test('should propose only the relevant matchers when custom expect matcher class
await test.expect(page.locator('foo')).not.toBeEditable(); await test.expect(page.locator('foo')).not.toBeEditable();
await test.expect(page.locator('foo')).toBeEditable({ editable: false }); await test.expect(page.locator('foo')).toBeEditable({ editable: false });
await test.expect(page.locator('foo')).toBeVisible();
await test.expect(page.locator('foo')).not.toBeVisible({ visible: false });
}); });
` `
}); });