chore: fixes to toBeInViewport (#20870)

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

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 };
       }
     }
 

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;
 

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 });