Playwright C#：通用组件封装及跨IFrame适配方案问询

针对你提到的两个核心问题，以下是适配Playwright生态的落地实现，完全兼容iframe/非iframe场景，同时贴近原生语法并保留ILocator的全部能力：

1. 兼容IPage与IFrameLocator的通用组件设计 #

Playwright中IPage和IFrameLocator均实现了ILocator接口，因此可以直接以ILocator作为组件的根上下文，天然兼容两种场景，无需额外适配层。

基础组件封装 #

先实现一个基础组件类，封装通用逻辑并暴露原生ILocator能力：

using Microsoft.Playwright;

// 基础组件类，继承ILocator并转发所有原生方法
public class BaseComponent : ILocator
{
    protected readonly ILocator _componentLocator;

    // 构造函数：根上下文（Page/Frame）+ 组件的Data-TestId
    public BaseComponent(ILocator rootContext, string testId)
    {
        _componentLocator = rootContext.Locator($"[data-testid='{testId}']");
    }

    // 隐式转换为ILocator，直接支持原生方法调用
    public static implicit operator ILocator(BaseComponent component) => component._componentLocator;

    // 实现ILocator接口的所有方法，直接转发给内部Locator
    public Task ClickAsync(ClickOptions? options = null) => _componentLocator.ClickAsync(options);
    public Task FillAsync(string value, FillOptions? options = null) => _componentLocator.FillAsync(value, options);
    public Task<string?> GetAttributeAsync(string name, LocatorGetAttributeOptions? options = null) => _componentLocator.GetAttributeAsync(name, options);
    public Task WaitForAsync(WaitForLocatorOptions? options = null) => _componentLocator.WaitForAsync(options);
    // 其他ILocator方法可按此方式逐一实现，或使用接口显式实现简化代码
}

自定义业务组件 #

基于基础类封装内部组件库的专属操作：

// 输入框组件
public class InputComponent : BaseComponent
{
    public InputComponent(ILocator rootContext, string testId) : base(rootContext, testId) { }

    // 自定义业务操作：输入数值并回车
    public async Task EnterValueAsync(decimal value)
    {
        await _componentLocator.FillAsync(value.ToString("F2"));
        await _componentLocator.PressAsync("Enter");
    }
}

// 下拉选择组件
public class SelectComponent : BaseComponent
{
    public SelectComponent(ILocator rootContext, string testId) : base(rootContext, testId) { }

    // 自定义业务操作：选择指定文本的选项
    public async Task SelectFromListAsync(string optionText)
    {
        await _componentLocator.ClickAsync();
        await _componentLocator.Locator($"text='{optionText}'").ClickAsync();
    }
}

2. 贴近Playwright原生语法的Page类设计 #

Page类统一管理组件实例，构造函数接受ILocator（支持Page或FrameLocator），测试人员使用方式完全贴近Playwright原生：

Page类实现 #

public class DepositPage
{
    private readonly ILocator _rootContext;

    // 支持传入主页面（IPage）或iframe（IFrameLocator）
    public DepositPage(ILocator rootContext) => _rootContext = rootContext;

    // 定义组件实例，直接暴露给测试用例
    public InputComponent DepositValue => new InputComponent(_rootContext, "depositValue");
    public SelectComponent DepositType => new SelectComponent(_rootContext, "depositType");
}

测试用例使用示例 #

// 主页面场景
var page = await browser.NewPageAsync();
var depositPage = new DepositPage(page);

// 调用自定义组件操作
await depositPage.DepositValue.EnterValueAsync(10.00);
// 直接使用Playwright原生方法和断言
await depositPage.DepositValue.WaitForAsync(new() { State = WaitForSelectorState.Visible });
await Expect(depositPage.DepositValue).ToHaveValueAsync("10.00");

// iframe场景
var frameLocator = page.FrameLocator("#main-iframe");
var iframeDepositPage = new DepositPage(frameLocator);

// 同样的组件调用方式
await iframeDepositPage.DepositType.SelectFromListAsync("Fixed Deposit");
// 原生方法无缝使用
await iframeDepositPage.DepositType.ClickAsync();

方案优势 #

• 完全兼容双场景：利用Playwright的接口设计，无需额外适配层即可支持主页面和iframe组件。
• 贴近原生语法：组件使用方式与Playwright原生Locator一致，测试人员学习成本低。
• 全能力暴露：通过隐式转换和接口实现，既支持自定义业务操作，又保留ILocator的所有原生方法和断言能力。
• 集中式维护：组件的定位逻辑和操作统一封装，UI变更时仅需修改对应组件类，大幅降低维护成本。

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