如何通过检查器选中Bootstrap datepicker日期以编写e2e测试用例？

1 解决无法检查元素的问题 #

bootstrap datepicker默认会在点击页面其他区域时自动隐藏，你可以通过暂停JS执行的方式固定浮层，正常查看元素属性：

• 打开浏览器开发者工具（F12），切换到「源代码（Sources）」标签页
• 点击输入框唤起datepicker浮层，保持浮层显示状态下直接按F8，页面JS会进入暂停状态，datepicker不会自动消失
• 切换回「元素（Elements）」标签页，点击左上角的元素选择箭头，即可直接点选datepicker上的任意日期元素查看属性

2 通用选择器规则 #

bootstrap datepicker的日期元素有统一的特征，无需每次手动检查也可以快速生成选择器：

• 所有可点击的日期元素通用类为 td.day
• 每个日期节点自带属性：data-day（日期数值）、data-month（月份，从0开始计数，1月对应0）、data-year（年份）
• 场景类：td.today 对应当天日期，td.disabled 对应不可选的禁用日期，td.old 对应当前视图中展示的上月日期，td.new 对应当前视图中展示的下月日期

示例：选择2024年5月20日的选择器为：
td[data-day="20"][data-month="4"][data-year="2024"]

3 测试用例示例 #

Cypress 示例 #

// 唤起datepicker
cy.get('#date-input').click()
// 确认datepicker已显示
cy.get('.datepicker-dropdown').should('be.visible')
// 点击指定日期
cy.get('td[data-day="20"][data-month="4"][data-year="2024"]').click()
// 验证交互结果
cy.get('.datepicker-dropdown').should('not.be.visible')
cy.get('#date-input').should('have.value', '2024-05-20')

Playwright 示例 #

// 唤起datepicker
await page.locator('#date-input').click()
// 点击指定日期
await page.locator('td[data-day="20"][data-month="4"][data-year="2024"]').click()
// 验证datepicker已消失
await expect(page.locator('.datepicker-dropdown')).toBeHidden()
// 验证输入框值正确
await expect(page.locator('#date-input')).toHaveValue('2024-05-20')

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