Edge/Chrome DevTools Recorder重放文件选择步骤超时问题求助

我用Edge/Chrome DevTools Recorder模拟网页操作做性能分析，录制时文件选择操作正常，但重放时「change input file」步骤总是超时——哪怕把超时时间拉到30秒也没用。试过让input元素可见、添加自定义步骤，都没解决问题。导出的录制JSON如下：

{"title": "File Process","timeout": 30000,"steps": [{"type": "setViewport","width": 1132,"height": 956,"deviceScaleFactor": 1,"isMobile": false,"hasTouch": false,"isLandscape": false},{"type": "navigate","url": "http://localhost:4200/home","assertedEvents": [{"type": "navigation","url": "http://localhost:4200/home","title": "Page Title"}]},{"type": "click","target": "main","selectors": [["aria/Select a Use Case"],["[data-testid='UseCaseDropDown'] span"],["xpath///*[@id=\"pn_id_5\"]/span"],["pierce/[data-testid='UseCaseDropDown'] span"],["text/Select a Use"]],"offsetY": 11.078125,"offsetX": 348},{"type": "click","target": "main","selectors": [["aria/Document Preparation (Chain of Density)","aria/[role=\"generic\"]"],["p-dropdownitem:nth-of-type(1) span"],["xpath///*[@id=\"pn_id_5_0\"]/span"],["pierce/p-dropdownitem:nth-of-type(1) span"],["text/Document Preparation (Chain"]],"offsetY": 18.078125,"offsetX": 283},{"type": "click","target": "main","selectors": [["label span.p-button-label"],["xpath///*[@id=\"pn_id_11_content\"]/div/div/label/p-button/button/span[2]"],["pierce/label span.p-button-label"],["text/Choose files"]],"offsetY": 13.28125,"offsetX": 259},{"type": "change","target": "main","selectors": ["[data-testid='FileInput']","xpath///*[@data-testid=\"FileInput\"]","pierce/[data-testid='FileInput']"],"value": "\"C:\\path\\to\\real\\existing\\file.pdf\""},{"type": "click","target": "main","selectors": [["div.new-process-form__start-bt-wrapper span.p-button-label"],["xpath///*[@data-testid=\"StartUploadButton\"]/button/span[2]"],["pierce/div.new-process-form__start-bt-wrapper span.p-button-label"],["text/Start upload"]],"offsetY": 15.296875,"offsetX": 22.1875},{"type": "click","target": "main","selectors": [["aria/Process 1"],["#pn_id_13_header_action"],["xpath///*[@id=\"pn_id_13_header_action\"]"],["pierce/#pn_id_13_header_action"]],"offsetY": 40.671875,"offsetX": 91.8125},{"type": "click","target": "main","selectors": [["div.process-result__summary p-button:nth-of-type(2) span"],["xpath///*[@id=\"pn_id_13_content\"]/app-process/div/app-process-result/div/div[2]/app-feedback/div/p-button[2]/button/span"],["pierce/div.process-result__summary p-button:nth-of-type(2) span"]],"offsetY": 10.828125,"offsetX": 11.859375}]}

解决办法 #

1. 修复文件路径格式 #

录制生成的value字段里路径带了多余的双引号，而且Windows路径的反斜杠没正确转义，导致Recorder找不到文件。把步骤里的value改成：

"value": "C:/path/to/real/existing/file.pdf"

或者转义反斜杠（需要双反斜杠）：

"value": "C:\\\\path\\\\to\\\\real\\\\existing\\\\file.pdf"

2. 用自定义脚本替换原生change步骤 #

Recorder的原生change步骤对隐藏的文件input支持不佳，换成script类型步骤直接模拟文件选择：
删除原来的change步骤，替换成：

{
  "type": "script",
  "target": "main",
  "script": "const input = document.querySelector('[data-testid=\"FileInput\"]'); const file = new File([''], 'file.pdf', {type: 'application/pdf'}); const dataTransfer = new DataTransfer(); dataTransfer.items.add(file); input.files = dataTransfer.files; input.dispatchEvent(new Event('change', {bubbles: true}));"
}

这个脚本会创建一个虚拟文件并触发change事件，让页面识别到文件已选择，足够满足性能分析的需求。如果需要真实文件内容，可以把File的第一个参数换成Blob数据。

3. 确保input元素就绪 #

• 在change步骤前加一个等待元素可见的步骤：

{
  "type": "waitForElement",
  "target": "main",
  "selectors": ["[data-testid='FileInput']"],
  "waitFor": "visible"
}

• 调整选择器优先级，把data-testid这种稳定选择器放在最前面，让Recorder优先找到标准DOM元素，避免依赖pierce穿透选择器。

4. 增加步骤间延迟 #

点击"Choose files"按钮后，文件选择框的弹出和input元素激活可能有延迟，在点击按钮和文件选择步骤之间加一个1秒的等待：

{
  "type": "wait",
  "waitFor": 1000
}

修改后的完整录制JSON #

{
  "title": "File Process",
  "timeout": 30000,
  "steps": [
    {"type": "setViewport","width": 1132,"height": 956,"deviceScaleFactor": 1,"isMobile": false,"hasTouch": false,"isLandscape": false},
    {"type": "navigate","url": "http://localhost:4200/home","assertedEvents": [{"type": "navigation","url": "http://localhost:4200/home","title": "Page Title"}]},
    {"type": "click","target": "main","selectors": [["aria/Select a Use Case"],["[data-testid='UseCaseDropDown'] span"],["xpath///*[@id=\"pn_id_5\"]/span"],["pierce/[data-testid='UseCaseDropDown'] span"],["text/Select a Use"]],"offsetY": 11.078125,"offsetX": 348},
    {"type": "click","target": "main","selectors": [["aria/Document Preparation (Chain of Density)","aria/[role=\"generic\"]"],["p-dropdownitem:nth-of-type(1) span"],["xpath///*[@id=\"pn_id_5_0\"]/span"],["pierce/p-dropdownitem:nth-of-type(1) span"],["text/Document Preparation (Chain"]],"offsetY": 18.078125,"offsetX": 283},
    {"type": "click","target": "main","selectors": [["label span.p-button-label"],["xpath///*[@id=\"pn_id_11_content\"]/div/div/label/p-button/button/span[2]"],["pierce/label span.p-button-label"],["text/Choose files"]],"offsetY": 13.28125,"offsetX": 259},
    {"type": "wait","waitFor": 1000},
    {"type": "waitForElement","target": "main","selectors": ["[data-testid='FileInput']"],"waitFor": "visible"},
    {"type": "script","target": "main","script": "const input = document.querySelector('[data-testid=\"FileInput\"]'); const file = new File([''], 'file.pdf', {type: 'application/pdf'}); const dt = new DataTransfer(); dt.items.add(file); input.files = dt.files; input.dispatchEvent(new Event('change', {bubbles: true}));"},
    {"type": "click","target": "main","selectors": [["div.new-process-form__start-bt-wrapper span.p-button-label"],["xpath///*[@data-testid=\"StartUploadButton\"]/button/span[2]"],["pierce/div.new-process-form__start-bt-wrapper span.p-button-label"],["text/Start upload"]],"offsetY": 15.296875,"offsetX": 22.1875},
    {"type": "click","target": "main","selectors": [["aria/Process 1"],["#pn_id_13_header_action"],["xpath///*[@id=\"pn_id_13_header_action\"]"],["pierce/#pn_id_13_header_action"]],"offsetY": 40.671875,"offsetX": 91.8125},
    {"type": "click","target": "main","selectors": [["div.process-result__summary p-button:nth-of-type(2) span"],["xpath///*[@id=\"pn_id_13_content\"]/app-process/div/app-process-result/div/div[2]/app-feedback/div/p-button[2]/button/span"],["pierce/div.process-result__summary p-button:nth-of-type(2) span"]],"offsetY": 10.828125,"offsetX": 11.859375}
  ]
}

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