为何我的Python Playwright测试在Firefox正常却在Chromium中失败？

以下两个Playwright测试用例在Firefox里能正常运行，但在Chromium浏览器中全部失败：

def test_cnn_sport_page_title(page: Page):
    page.goto('https://www.cnn.com/sport')  
    expect(page).to_have_url('https://www.cnn.com/sport')  
    expect(page).to_have_title(re.compile('Latest'))

def test_cnn_sport_page_football_link_in_header(page: Page): 
    page.goto('https://www.cnn.com/sport')
    expect(page.locator('header').get_by_role('link', name='Football')).to_be_visible()

报错详情 #

标题测试报错 #

E       PageAssertions.to_have_title with timeout 5000ms
E         - waiting for locator(":root")
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""
E         -   locator resolved to <html>…</html>
E         -   unexpected value ""

头部链接测试报错 #

E     AssertionError: Locator expected to be visible
E     Actual value: <element(s) not found> 
E     Call log:
E     LocatorAssertions.to_be_visible with timeout 5000ms
E       - waiting for locator("header").get_by_role("link", name="Football")

问题原因 #

Chromium和Firefox在页面加载策略、JS执行时机上存在差异，CNN官网可能针对不同浏览器做了差异化渲染，或者页面加载时需要等待更多资源完成初始化：

1. 标题为空：Chromium中页面标题可能是初始加载后通过JavaScript动态设置的，测试执行时标题还未更新就触发了断言。
2. 元素找不到：头部的Football链接是动态渲染的，需要等待页面某些组件加载完成后才会出现，Chromium的加载速度或渲染顺序导致测试运行时元素尚未生成。

解决方案 #

1. 优化页面加载等待 #

在page.goto中指定networkidle等待策略，确保页面完全加载后再执行断言：

page.goto('https://www.cnn.com/sport', wait_until='networkidle')

该策略会等待500ms内无网络请求再继续，适合处理动态渲染的页面。

2. 延长标题断言超时时间 #

给标题断言设置更长的超时时间，确保JavaScript有足够时间更新页面标题：

def test_cnn_sport_page_title(page: Page):
    page.goto('https://www.cnn.com/sport', wait_until='networkidle')
    expect(page).to_have_url('https://www.cnn.com/sport')
    # 调整超时时间为10秒，可根据实际情况修改
    expect(page).to_have_title(re.compile('Latest'), timeout=10000)

3. 调整元素定位逻辑 #

先等待header元素加载完成，再用更稳定的文本定位方式查找Football链接：

def test_cnn_sport_page_football_link_in_header(page: Page): 
    page.goto('https://www.cnn.com/sport', wait_until='networkidle')
    # 先确保header元素可见
    header = page.locator('header')
    expect(header).to_be_visible()
    # 用文本定位替代角色定位，稳定性更高
    expect(header.get_by_text('Football', exact=True)).to_be_visible()

4. 禁用Chromium缓存（可选） #

如果是缓存导致页面渲染异常，启动浏览器时添加参数禁用缓存：

browser = chromium.launch(
    args=["--disable-cache", "--disable-application-cache"]
)

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