playwright/tests/page/locator-is-visible.spec.ts

88 lines
3.3 KiB
TypeScript

/**
* Copyright 2018 Google Inc. All rights reserved.
* Modifications copyright (c) Microsoft Corporation.
*
* 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 { test as it, expect } from './pageTest';
it('isVisible and isHidden should work', async ({ page }) => {
await page.setContent(`<div>Hi</div><span></span>`);
const div = page.locator('div');
expect(await div.isVisible()).toBe(true);
expect(await div.isHidden()).toBe(false);
expect(await page.isVisible('div')).toBe(true);
expect(await page.isHidden('div')).toBe(false);
const span = page.locator('span');
expect(await span.isVisible()).toBe(false);
expect(await span.isHidden()).toBe(true);
expect(await page.isVisible('span')).toBe(false);
expect(await page.isHidden('span')).toBe(true);
expect(await page.isVisible('no-such-element')).toBe(false);
expect(await page.isHidden('no-such-element')).toBe(true);
});
it('isVisible should be true for opacity:0', async ({ page }) => {
await page.setContent(`<div style="opacity:0">Hi</div>`);
await expect(page.locator('div')).toBeVisible();
});
it('isVisible should be true for element outside view', async ({ page }) => {
await page.setContent(`<div style="position: absolute; left: -1000px">Hi</div>`);
await expect(page.locator('div')).toBeVisible();
});
it('isVisible and isHidden should work with details', async ({ page }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/10674' });
await page.setContent(`<details>
<summary>click to open</summary>
<ul>
<li>hidden item 1</li>
<li>hidden item 2</li>
<li>hidden item 3</li>
</ul
</details>`);
await expect(page.locator('ul')).toBeHidden();
});
it('isVisible inside a button', async ({ page }) => {
await page.setContent(`<button><span></span>a button</button>`);
const span = page.locator('span');
expect(await span.isVisible()).toBe(false);
expect(await span.isHidden()).toBe(true);
expect(await page.isVisible('span')).toBe(false);
expect(await page.isHidden('span')).toBe(true);
await expect(span).not.toBeVisible();
await expect(span).toBeHidden();
await span.waitFor({ state: 'hidden' });
await page.locator('button').waitFor({ state: 'visible' });
});
it('isVisible inside a role=button', async ({ page }) => {
await page.setContent(`<div role=button><span></span>a button</div>`);
const span = page.locator('span');
expect(await span.isVisible()).toBe(false);
expect(await span.isHidden()).toBe(true);
expect(await page.isVisible('span')).toBe(false);
expect(await page.isHidden('span')).toBe(true);
await expect(span).not.toBeVisible();
await expect(span).toBeHidden();
await span.waitFor({ state: 'hidden' });
await page.locator('[role=button]').waitFor({ state: 'visible' });
});