如何检查原生HTML日期选择器日历的DOM结构？

我正在使用原生HTML日期选择器，通过HTML的showPicker()方法唤起它。现在需要编写基于Playwright的端到端（E2E）测试，实现打开日历并点击不同日期数字的操作。

遇到的问题：无法让日历保持打开状态来检查DOM，只要点击任意位置日历就会消失。尝试过在input元素上设置子树修改断点，但没有效果；也试过Playwright的codegen工具，虽然能点击日期数字元素，但工具调试器未输出对应的定位器。

请问有什么方法可以检查HTML日期选择器的DOM？

补充代码： #

<label for="date">
  <input
    required
    @change="${this._setDateFromPicker}"
    hidden
    class="date-input"
    type="date"
    value="${this.value}">
  </input>

  <md-outlined-button
    @click=${this._openPicker}
    class="date-btn">
    ${this.displayDate}
  </md-outlined-button>
</label>

1. Playwright调试模式暂停保留日历状态 #

在测试代码中唤起日历后调用page.pause()，执行到此处时会暂停测试，日历将保持打开状态：

// 示例测试代码
await page.click('.date-btn'); // 点击按钮唤起日历
await page.pause(); // 暂停执行，此时日历不会消失

暂停后打开浏览器DevTools，需开启Show user agent shadow DOM选项（在DevTools设置的Elements栏目下），才能看到原生日期选择器的shadow DOM结构。

2. 注入脚本禁用日历自动关闭 #

通过Playwright的addInitScript注入脚本，阻止点击页面其他区域时关闭日历：

await page.addInitScript(() => {
  document.addEventListener('click', (e) => {
    const dateInput = document.querySelector('.date-input[type="date"]');
    // 检测日历处于激活状态时，阻止事件冒泡
    if (dateInput && dateInput.shadowRoot?.activeElement) {
      e.stopPropagation();
    }
  }, true);
});

注入后，点击页面其他位置日历不会关闭，可自由检查DOM结构。

3. 直接定位日期元素的技巧 #

原生日期选择器的日期元素在不同浏览器中有特定标识，以Chrome为例，日期单元格带有data-date属性，可通过shadow DOM定位：

const dateInput = page.locator('.date-input[type="date"]');
await dateInput.click(); // 唤起日历
// 定位日期为20的单元格
const targetDate = dateInput.locator('::-webkit-datetime-edit-day-field').locator('[data-date="20"]');
await targetDate.click();

4. 浏览器DevTools强制冻结状态 #

操作步骤：

1. 打开浏览器DevTools的Sources面板
2. 点击按钮唤起日历，立刻按下F8（Chrome）或Ctrl+\（Firefox）强制暂停脚本执行
3. 此时页面交互完全冻结，日历不会关闭，可直接在Elements面板查看DOM结构

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