From 72942e81d5b84efc2c5e419cc275b0614b7e8cf7 Mon Sep 17 00:00:00 2001 From: Andrey Lushnikov Date: Mon, 13 Feb 2023 15:21:40 -0800 Subject: [PATCH] chore: fixes to toBeInViewport (#20870) --- docs/src/api/class-locatorassertions.md | 14 +++++++------- .../src/server/injected/injectedScript.ts | 2 +- packages/playwright-test/types/test.d.ts | 6 +++--- tests/page/expect-misc.spec.ts | 6 ++++-- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/docs/src/api/class-locatorassertions.md b/docs/src/api/class-locatorassertions.md index 2fa363cee0..9c5248b628 100644 --- a/docs/src/api/class-locatorassertions.md +++ b/docs/src/api/class-locatorassertions.md @@ -694,7 +694,7 @@ const locator = page.locator('button.submit'); await expect(locator).toBeInViewport(); // Make sure element is fully outside of viewport. await expect(locator).not.toBeInViewport(); -// Make sure strictly more than half of the element intersects viewport. +// Make sure that at least half of the element intersects viewport. await expect(locator).toBeInViewport({ ratio: 0.5 }); ``` @@ -704,7 +704,7 @@ Locator locator = page.locator("button.submit"); assertThat(locator).isInViewport(); // Make sure element is fully outside of viewport. assertThat(locator).not().isInViewport(); -// Make sure strictly more than half of the element intersects viewport. +// Make sure that at least half of the element intersects viewport. assertThat(locator).isInViewport(new LocatorAssertions.IsInViewportOptions().setRatio(0.5)); ``` @@ -714,7 +714,7 @@ var locator = Page.Locator("button.submit"); await Expect(locator).ToBeInViewportAsync(); // Make sure element is fully outside of viewport. await Expect(locator).Not.ToBeInViewportAsync(); -// Make sure strictly more than half of the element intersects viewport. +// Make sure that at least half of the element intersects viewport. await Expect(locator).ToBeInViewportAsync(new() { Ratio = 0.5 }); ``` @@ -726,7 +726,7 @@ locator = page.locator("button.submit") await expect(locator).to_be_in_viewport() # Make sure element is fully outside of viewport. await expect(locator).not_to_be_in_viewport() -# Make sure strictly more than half of the element intersects viewport. +# Make sure that at least half of the element intersects viewport. await expect(locator).to_be_in_viewport(ratio=0.5); ``` @@ -738,7 +738,7 @@ locator = page.locator("button.submit") expect(locator).to_be_in_viewport() # Make sure element is fully outside of viewport. expect(locator).not_to_be_in_viewport() -# Make sure strictly more than half of the element intersects viewport. +# Make sure that at least half of the element intersects viewport. expect(locator).to_be_in_viewport(ratio=0.5); ``` @@ -747,8 +747,8 @@ expect(locator).to_be_in_viewport(ratio=0.5); * since: v1.31 - `ratio` <[float]> -The minimal ratio of the element to intersect viewport. Element's ratio should be strictly greater than -this number. Defaults to `0`. +The minimal ratio of the element to intersect viewport. If equals to `0`, then +element should intersect viewport at any positive ratio. Defaults to `0`. ### option: LocatorAssertions.toBeInViewport.timeout = %%-js-assertions-timeout-%% * since: v1.31 diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts index 8bea09ade0..e8bd7bb003 100644 --- a/packages/playwright-core/src/server/injected/injectedScript.ts +++ b/packages/playwright-core/src/server/injected/injectedScript.ts @@ -1191,7 +1191,7 @@ export class InjectedScript { // Viewport intersection if (expression === 'to.be.in.viewport') { const ratio = await this.viewportRatio(element); - return { received: `viewport ratio ${ratio}`, matches: ratio > (options.viewportRatio ?? 0) }; + return { received: `viewport ratio ${ratio}`, matches: ratio > 0 && ratio > (options.viewportRatio ?? 0) - 1e-9 }; } } diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts index 8105324977..a274e3591d 100644 --- a/packages/playwright-test/types/test.d.ts +++ b/packages/playwright-test/types/test.d.ts @@ -4480,7 +4480,7 @@ interface LocatorAssertions { * await expect(locator).toBeInViewport(); * // Make sure element is fully outside of viewport. * await expect(locator).not.toBeInViewport(); - * // Make sure strictly more than half of the element intersects viewport. + * // Make sure that at least half of the element intersects viewport. * await expect(locator).toBeInViewport({ ratio: 0.5 }); * ``` * @@ -4488,8 +4488,8 @@ interface LocatorAssertions { */ toBeInViewport(options?: { /** - * The minimal ratio of the element to intersect viewport. Element's ratio should be strictly greater than this - * number. Defaults to `0`. + * The minimal ratio of the element to intersect viewport. If equals to `0`, then element should intersect viewport at + * any positive ratio. Defaults to `0`. */ ratio?: number; diff --git a/tests/page/expect-misc.spec.ts b/tests/page/expect-misc.spec.ts index 50c8e75d29..6e2a4ee174 100644 --- a/tests/page/expect-misc.spec.ts +++ b/tests/page/expect-misc.spec.ts @@ -296,6 +296,7 @@ test.describe('toBeInViewport', () => { await expect(page.locator('#small')).not.toBeInViewport(); await page.locator('#small').scrollIntoViewIfNeeded(); await expect(page.locator('#small')).toBeInViewport(); + await expect(page.locator('#small')).toBeInViewport({ ratio: 1 }); }); test('should respect ratio option', async ({ page }) => { @@ -307,9 +308,10 @@ test.describe('toBeInViewport', () => { await expect(page.locator('div')).toBeInViewport({ ratio: 0.1 }); await expect(page.locator('div')).toBeInViewport({ ratio: 0.2 }); - // In this test, element's ratio is 0.25. Make sure `ratio` is compared strictly. await expect(page.locator('div')).toBeInViewport({ ratio: 0.24 }); - await expect(page.locator('div')).not.toBeInViewport({ ratio: 0.25 }); + // In this test, element's ratio is 0.25. + await expect(page.locator('div')).toBeInViewport({ ratio: 0.25 }); + await expect(page.locator('div')).not.toBeInViewport({ ratio: 0.26 }); await expect(page.locator('div')).not.toBeInViewport({ ratio: 0.3 }); await expect(page.locator('div')).not.toBeInViewport({ ratio: 0.7 });