Cypress- SelectFile() 在 Chrome 中未按预期工作

Question

赛普拉斯版本：9.5.0
Chrome版本：98

我一直在尝试使用 cy.selectFile() 在 Cypress 测试中上传文件。下面的代码看起来是这样的：

cy.get('#new-project-photo', { force: true }).selectFile({
    contents: 'cypress/fixtures/media/003_StreetView.jpg',
    fileName: 'image01.jpg',
    mimeType: 'image/jpeg',
}, { force: true });

文件输入的 HTML 如下所示：

<input multiple="multiple" id="new-project-photo" 
data-file-type="image" data-max-size="10485760" data-callback="true" 
type="file" name="file" 
data-url="https://api.cloudinary.com/v1_1/pxd/auto/upload" 
data-form-data="{&quot;allowed_formats&quot;:&quot;jpg,gif,png,jpeg&quot;,&quot;callback&quot;:&quot;https://kf.pxs-staging.com/cloudinary_cors.html&quot;,&quot;timestamp&quot;:1645550617,&quot;signature&quot;:&quot;47dd768ebfad68ebce2c8c5bc9b1da08777f69f9&quot;,&quot;api_key&quot;:&quot;421553125867598&quot;}" 
data-cloudinary-field="photos[image]" class="cloudinary-fileupload">

运行通过 FF 测试时的代码按预期运行，文件在 post 请求中上传时带有 200。然而当运行测试通过Chrome。我收到 400，错误为 {"error":{"message":"Missing required parameter - file"}}（来自服务器）。在 chrome.

中手动上传时，上传确实按预期工作

它将 POST 发送到的 URL 是一个与测试站点的基础 url 不同的域。这可能是原因吗？我也对在配置中包含这个感到好奇： "chromeWebSecurity": false, 在 chrome.

中正确加载站点所需要的

我也试过先将图像包裹在夹具中，同样的问题。

有人知道我可能做错了什么以及为什么它似乎只在 FF 中有效吗？

Answer 1

由于您使用 force: true 选择输入（这意味着实际的输入元素从视图中隐藏），一种可能是被引用的输入可能没有 requirements 到位，以便 selectFile 成功。也许在 Firefox 中输入类型是从上下文中推断出来的，而在 Chrome 中则需要明确设置。

您是否检查过传递给 selectFile 的元素 #new-project-photo 是否特别满足此要求（来自上面链接的 Cypress 文档）？

a single input element with type="file", or a label element attached to one

如果您可以 post 可以帮助进一步重建此场景并允许测试的元素及其上下文。目前根据可用信息不可能可靠地重现此问题。

Answer 2

对于遇到此问题的任何人，请确保您拥有最新版本。截至今天 (v9.5.1) 似乎已经解决了我遇到的问题。它现在可以毫无问题地添加图像。 Chrome 也在版本 99

谢谢大家

Cypress- SelectFile() 在 Chrome 中未按预期工作

Cypress- SelectFile() Not working as expected in Chrome

javascript

file-upload

cypress