如何在Playwright（C#）中切换新标签页并验证页面内容

以下以Playwright为例，给出具体的实现步骤和代码示例：

核心思路 #

1. 在点击元素前，监听Browser Context的page事件，捕获新创建的标签页对象
2. 使用中键点击目标元素
3. 等待新标签页加载完成后，进行内容验证

JavaScript/TypeScript 示例 #

// 假设已完成browser和context的初始化
const page = await context.newPage();
await page.goto('目标页面的URL');

// 1. 准备捕获新标签页
let newTabPage;
context.on('page', (page) => {
  newTabPage = page;
});

// 鼠标中键点击目标元素
const targetElement = page.locator('你的元素选择器（如button#link）');
await targetElement.click({ button: 'middle' });

// 等待新标签页加载完成
await newTabPage.waitForLoadState();

// 2. 验证新标签页内容
// 示例1：验证页面标题
const pageTitle = await newTabPage.title();
console.log('新标签页标题:', pageTitle);
expect(pageTitle).toContain('预期的标题关键词');

// 示例2：验证页面内指定元素的文本
const contentText = await newTabPage.locator('.content-area').textContent();
expect(contentText).toBe('预期的内容文本');

Python 示例 #

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("目标页面的URL")

    # 1. 监听新标签页创建
    new_tab_page = None
    def capture_new_page(page):
        nonlocal new_tab_page
        new_tab_page = page
    context.on("page", capture_new_page)

    # 中键点击目标元素
    target_element = page.locator("你的元素选择器")
    target_element.click(button="middle")

    # 等待新标签页加载完成
    new_tab_page.wait_for_load_state()

    # 2. 验证内容
    # 验证标题
    assert "预期标题关键词" in new_tab_page.title()
    # 验证页面元素
    content = new_tab_page.locator(".content-area").text_content()
    assert content == "预期内容文本"

    context.close()
    browser.close()

注意事项 #

• 必须在点击元素前设置page事件监听，否则可能无法捕获新标签页
• 使用waitForLoadState()（或Python的wait_for_load_state()）确保页面完全加载后再执行验证，避免因元素未就绪导致的错误
• 如果一次操作可能打开多个新标签页，可以在监听事件中通过page.url()或page.title()筛选目标页面，比如：

context.on('page', (page) => {
  if (page.url().includes('预期的URL关键词')) {
    newTabPage = page;
  }
});

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