Is there a way to verify that UI element is located in a certain part of the screen in Playwright?

Question

I am new to Playwright and just recently started trying to implement tests with it. My question is, is there a way to test that some web element is in certain location on the web page? For example, if I have an .svg logo on my web page, would I be able to test that it appears on the top left part of the screen with playright? Would I be able to test that the a certain button is located at the right bottom of a certain web container?

I couldn't find any examples online with regards to those specifics. I am using TypeScript for my tests.

Answer 1

Playwright has visual comparison testing which you might want to look into. It checks how the page being tested looks compared to a golden file (the correct expected output). It tests visual elements. Here is the example from the Playwright docs:

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

You can see more about how this works in the Playwright docs or on this tutorial about visual regression testing which I found helpful.