如何用Playwright验证UI元素处于屏幕/容器的特定位置？

当然可以测试Web元素的位置，Playwright通过boundingBox()方法获取元素的坐标与尺寸信息，结合断言就能实现这类验证。以下是针对你需求的具体实现：

一、验证.svg Logo在屏幕左上角 #

屏幕左上角的坐标原点是(0,0)，考虑到页面可能存在的边距或微小布局偏差，我们可以设置合理的阈值（比如x、y坐标均小于10px）来做断言：

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

test('验证svg logo在屏幕左上角', async ({ page }) => {
  await page.goto('你的页面URL');
  
  // 获取logo元素的位置信息
  const logoLocator = page.locator('svg#logo'); // 替换为你的logo选择器
  const logoBox = await logoLocator.boundingBox();
  
  // 确保元素可见且位置信息存在
  expect(logoBox).not.toBeNull();
  await expect(logoLocator).toBeVisible();
  
  // 断言logo接近左上角（阈值可根据实际情况调整）
  expect(logoBox?.x).toBeLessThan(10);
  expect(logoBox?.y).toBeLessThan(10);
});

二、验证按钮位于容器右下角 #

需要先获取容器的位置与尺寸，再计算出容器右下角的坐标，最后对比按钮的右下角坐标是否匹配：

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

test('验证按钮位于容器右下角', async ({ page }) => {
  await page.goto('你的页面URL');
  
  const containerLocator = page.locator('.container'); // 替换为你的容器选择器
  const buttonLocator = page.locator('.container .submit-btn'); // 替换为你的按钮选择器
  
  // 获取容器和按钮的位置信息
  const containerBox = await containerLocator.boundingBox();
  const buttonBox = await buttonLocator.boundingBox();
  
  // 前置校验
  expect(containerBox).not.toBeNull();
  expect(buttonBox).not.toBeNull();
  await expect(containerLocator).toBeVisible();
  await expect(buttonLocator).toBeVisible();
  
  // 计算容器右下角坐标，按钮右下角应接近该位置（阈值可调整）
  const containerBottomRightX = containerBox!.x + containerBox!.width;
  const containerBottomRightY = containerBox!.y + containerBox!.height;
  const buttonBottomRightX = buttonBox!.x + buttonBox!.width;
  const buttonBottomRightY = buttonBox!.y + buttonBox!.height;
  
  // 断言按钮右下角与容器右下角的偏差在合理范围内
  expect(Math.abs(buttonBottomRightX - containerBottomRightX)).toBeLessThan(10);
  expect(Math.abs(buttonBottomRightY - containerBottomRightY)).toBeLessThan(10);
});

注意事项 #

• boundingBox()仅对可见元素有效，不可见元素会返回null，所以测试前务必确保元素处于可见状态。
• 阈值设置要结合实际布局情况，避免因浏览器渲染的微小差异导致测试失败。

内容的提问来源于stack exchange，提问作者Mary