Playwright（C#）日期选择器弹窗日期选择失败求助

我刚接触Playwright，但有一定自动化测试经验，在C#项目中尝试从日期选择器弹窗选择日期却无法成功。表单字段不能直接用FillAsync填充，必须从弹窗选择，但所有定位器尝试都失败了。目前我已通过代码await Page.ClickAsync("//input[@placeholder='Start date']");点击日历按钮打开了日期选择器，但始终无法选中日期，尝试了多种await Page.ClickAsync("//td[@class='ng-tns-c130-2 ng-star-inserted'][text()='28']");的变体都无效，求解决建议。

1. 等待元素就绪再操作 #

日期弹窗打开后需要时间渲染，直接点击会因元素未加载完成失败，用Playwright的等待机制确保元素可见：

// 等待目标日期元素可见
await Page.WaitForSelectorAsync("//td[text()='28']", new WaitForSelectorOptions { State = WaitForSelectorState.Visible });
await Page.ClickAsync("//td[text()='28']");

2. 抛弃动态class，用稳定定位器 #

你用的ng-tns-c130-2这类Angular动态生成的class，刷新就会变，完全不可靠。换以下稳定方式：

• 结合父容器特征定位：

  // 限定在日期选择器容器内找目标日期
  await Page.ClickAsync("//div[contains(@class, 'calendar')]//td[text()='28']");
  

• 若元素有日期相关的静态属性（比如data-date="2024-05-28"），直接用属性定位：

  await Page.ClickAsync("//td[@data-date='2024-05-28']");
  

3. 排查iframe或Shadow DOM #

如果日期选择器嵌套在iframe里，必须先切换到iframe才能操作：

var calendarFrame = Page.FrameLocator("//iframe[@id='calendar-frame']");
await calendarFrame.ClickAsync("//td[text()='28']");

如果是Shadow DOM结构，用::shadow穿透定位：

await Page.ClickAsync("//div#calendar-root::shadow//td[text()='28']");

4. 模拟完整用户操作路径 #

有时候直接点击日期无效，可能需要先切换到目标月份/年份，再选择日期：

// 点击下月按钮切换到目标月份
await Page.ClickAsync("//button[contains(@aria-label, 'Next month')]");
// 选择日期
await Page.ClickAsync("//td[text()='28']");

5. 用Playwright Inspector自动生成定位器 #

这是最省心的办法：

1. 在打开日期选择器的代码后加入await Page.PauseAsync();
2. 运行测试，Playwright Inspector会自动弹出
3. 点击「Pick element」按钮，选中目标日期，复制工具生成的定位器替换到代码里

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