自动化脚本问题：日期选择器无法设指定日期、无法定位表格元素

问题描述 #

我编写了用于登录、导航至报表页面、选择日期并下载文件的脚本，但遇到两个问题：

• 无论使用何种格式，日期选择器始终返回当日日期，已尝试page.fill、page.locator方法但无效；
• 无法仅定位table元素来完成文件下载。

尝试过的代码：

page.fill('[id="txtFromDate"]', formatted_date)
page.locator('[id="txtToDate"]').fill('11-08-2024')

解决方案 #

1. 日期选择器不生效的处理 #

很多日期输入框带有readonly属性，直接填充值不会触发组件内部的日期更新逻辑，可按以下步骤处理：

• 移除readonly属性后填充：

# 处理起始日期
page.evaluate('document.getElementById("txtFromDate").removeAttribute("readonly")')
page.fill('[id="txtFromDate"]', formatted_date)

# 处理结束日期
page.evaluate('document.getElementById("txtToDate").removeAttribute("readonly")')
page.locator('[id="txtToDate"]').fill('11-08-2024')

• 模拟手动选择日期：如果上述方法无效，直接唤起日期选择器弹窗并点击对应日期：

# 唤起起始日期选择器
page.click('[id="txtFromDate"]')
# 点击目标日期（需根据实际HTML调整选择器，比如通过data-date属性或文本）
page.click('.date-picker-cell[data-date="2024-08-11"]')

# 同理处理结束日期
page.click('[id="txtToDate"]')
page.click('.date-picker-cell[data-date="2024-08-11"]')

• 校验日期格式：确认formatted_date的格式与系统要求一致（比如YYYY-MM-DD、MM/DD/YYYY），尝试切换格式测试。

2. 定位table关联的下载元素 #

table本身无法触发下载操作，需找到与table关联的下载按钮或操作入口：

• 直接定位下载按钮：检查HTML中table附近的下载控件（如带download属性的a标签、button按钮），示例：

# 假设下载按钮在table的父容器内
page.locator('div.table-container button.download-btn').click()

# 或通过table定位其相邻的下载按钮
page.locator('table').locator('..').getByRole('button', name='下载').click()

• 模拟快捷键下载：若需选中table内容后保存，可模拟键盘操作：

# 选中table
page.locator('table').click()
# 触发保存快捷键（Windows用Control+S，Mac用Meta+S）
page.keyboard.press('Control+S')

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