Playwright中如何将first()/last()等方法作为参数传入函数

你之前的写法问题在于把字符串直接当作方法名调用，TypeScript不支持这种动态属性访问的方式（除非用索引，但方法调用需要额外处理）。这里有两种靠谱的实现方式：

方式一：传入转换函数（推荐，灵活性最高） #

直接把first()、last()这类操作封装成一个函数参数，让它接收基础Locator并返回处理后的Locator。这种方式支持所有Locator的方法，甚至可以组合多个操作：

import { Page, Locator } from '@playwright/test';

export async function checkLocatorByText(
  page: Page,
  locatorName: string,
  locatorTransform: (locator: Locator) => Locator,
  text: string
) {
  const baseLocator = page.locator(locatorName);
  // 应用传入的定位器转换逻辑
  const targetLocator = locatorTransform(baseLocator);
  await expect(targetLocator).toContainText(text);
}

调用示例 #

// 检查第一个匹配元素
await checkLocatorByText(page, '.item', locator => locator.first(), '测试文本');

// 检查最后一个匹配元素
await checkLocatorByText(page, '.item', locator => locator.last(), '测试文本');

// 支持更复杂的操作，比如取第2个元素（索引从0开始）
await checkLocatorByText(page, '.item', locator => locator.nth(1), '测试文本');

// 甚至可以组合过滤和位置选择
await checkLocatorByText(page, '.item', locator => locator.filter({ hasText: '前缀' }).first(), '目标文本');

方式二：传入字符串类型的位置标识（适合固定场景） #

如果只需要支持有限的几个方法（比如first、last、nth），可以通过字符串参数配合switch判断来实现：

import { Page } from '@playwright/test';

export async function checkLocatorByText(
  page: Page,
  locatorName: string,
  locatorPosition: 'first' | 'last' | 'nth',
  text: string,
  index?: number
) {
  let targetLocator = page.locator(locatorName);

  switch (locatorPosition) {
    case 'first':
      targetLocator = targetLocator.first();
      break;
    case 'last':
      targetLocator = targetLocator.last();
      break;
    case 'nth':
      if (index === undefined) throw new Error('使用nth时必须传入index参数');
      targetLocator = targetLocator.nth(index);
      break;
    default:
      throw new Error(`不支持的定位器位置：${locatorPosition}`);
  }

  await expect(targetLocator).toContainText(text);
}

调用示例 #

// 检查第一个元素
await checkLocatorByText(page, '.item', 'first', '测试文本');

// 检查最后一个元素
await checkLocatorByText(page, '.item', 'last', '测试文本');

// 检查第3个元素（索引为2）
await checkLocatorByText(page, '.item', 'nth', '测试文本', 2);

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