1

Using toBeVisible:

const locator = page.locator('.my-element');
await expect(locator).toBeVisible();

Using toBeInViewport:

const locator = page.locator('.my-element');
await expect(locator).toBeInViewport();

What is the difference here? both of them are testing if the element is visible to user.

If both of them are different, then what is the use case for each of them?

Muhammed Rahif
  • 434
  • 1
  • 5
  • 17
  • 3
    [visible](https://playwright.dev/docs/actionability#visible), [in viewport](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-in-viewport) – James Apr 15 '23 at 18:14
  • This is a interesting topic not only for playwright , but also for UI automation in general. – Vishal Aggarwal Apr 15 '23 at 21:41

1 Answers1

0

Short Answer:

Typical use case for 'toBeInViewPort': Lets say you have an anchor tag in one of your app page and you want to check that after the click the page scrolls down to the correct section of the page.

On clicking the below link , it will not only take you to the correct Locator assertions page but also on to the exact subsection of 'toBeInViewport'.

Example : Playwright documentation tags

enter image description here

Long Answer:

What is viewport?

A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view.

When visibility in viewport comes in the picture?

Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. As the web has matured, the need for this kind of information has grown. Intersection information is needed for many reasons, such as:

  1. "lazy loading" where more and more content(like images etc) is loaded on webpage as you scroll through it.

  2. Infinite scrolling where more and more content is loaded as you scroll almost infinitely like YouTube or other social media sites.

  3. Visibility of advertisements in sideview in an site like for revenue.

In such scenarios sometimes developer needs to fire an event even when element comes partially in view. Here viewport comes into play as we can define ratio as parameter so that we can assert it even when it's intersecting(partially visible) in viewport.

That is what implemented in playwright toBeInViewport to cater to those complex visibility assertion needs but it may not be required in many general scenarios where toBeVisible is enough in most of the simple use cases.

I hope it will help...

Reference:https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Vishal Aggarwal
  • 1,929
  • 1
  • 13
  • 23