Playwright中是否有编程式方案实现选择器的链式操作？

你完全可以通过存储定位器到变量的方式避免重复编写选择器，这是最简单直接的方案，不需要复杂的Promise技巧。另外也可以封装简单的链式处理函数，满足你“单个表达式完成多操作”的需求。以下针对你的代码给出具体示例：

方法1：存储定位器到变量（推荐新手使用） #

把定位器赋值给一个变量，之后所有操作都基于这个变量执行，既简洁又易维护：

// 只定义一次定位器
const textBoxLocator = page.getByRole('textbox');

// 依次执行操作
await textBoxLocator.click();
await textBoxLocator.fill('test value in the text box');
await textBoxLocator.press('Enter');

Playwright的Locator是惰性的，只有当你调用click()/fill()这类操作方法时才会实际查找元素，所以重复使用同一个定位器不会有额外性能开销，反而能保证定位逻辑的一致性。

方法2：封装链式操作函数 #

如果想要更接近“链式调用”的写法，可以自己封装一个简单的工具函数，批量执行定位器上的操作：

// 封装链式执行函数
async function runLocatorActions(locator, actions) {
  for (const action of actions) {
    await action(locator);
  }
}

// 调用示例
await runLocatorActions(page.getByRole('textbox'), [
  locator => locator.click(),
  locator => locator.fill('test value in the text box'),
  locator => locator.press('Enter')
]);

这个函数会按顺序执行你传入的每个操作，保证操作的先后顺序（因为Playwright的操作需要按顺序await，不能用Promise.all并行执行，否则会导致操作混乱）。

为什么Playwright不支持Cypress式的链式？ #

Cypress的命令是基于同步队列的，而Playwright完全使用原生Promise异步操作，每个DOM操作都需要显式await。不过通过上面的两种方式，你完全可以达到和Cypress类似的代码简洁性，同时符合Playwright的异步编程模型。

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