如何使用Playwright点击元素的特定位置？

在Playwright中，你可以通过click()方法的position参数，指定相对于目标元素左上角的偏移坐标，实现点击元素的特定位置（比如右侧）。具体操作如下：

• 先获取目标元素的边界框信息，拿到元素的宽度和高度，动态计算右侧的点击位置（避免元素尺寸变化导致定位失效）
• 调用click()时传入计算好的位置参数

示例代码 #

const iframe = page.frameLocator('iframe[allowfullscreen]');
const scrollbarLocator = iframe.locator('div.tableEx > div:nth-child(7)');

// 获取元素的边界框（包含宽度、高度等尺寸信息）
const boundingBox = await scrollbarLocator.boundingBox();
if (!boundingBox) {
  throw new Error("目标元素未找到或不可见");
}

// 计算点击位置：靠近元素右侧（x为元素宽度减5px，避免超出元素范围），垂直居中
const targetPosition = {
  x: boundingBox.width - 5,
  y: boundingBox.height / 2
};

// 点击元素的指定位置
await scrollbarLocator.click({ position: targetPosition });

补充说明 #

• 如果元素尺寸固定，也可以直接传入固定偏移值，比如{x: 95, y: 20}，但动态计算更适配元素尺寸变化的场景
• boundingBox()会返回元素在页面中的绝对位置和尺寸，这里的position参数是相对于元素自身左上角的偏移，所以不需要考虑元素的绝对坐标

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