scroll - Cypress 滚动获取一个元素

Question

我目前正在探索自动化工具 Cypress，但我对最基本的功能有疑问。

我想做的是访问此 URL:https://www.unicef.fr/se-connecter/
点击密码输入，然后输入密码。

但是每当我要输入代码时，屏幕会向下滚动，并且会收到一条错误消息，提示无法找到输入的密码。

这是我使用的代码:

cy.visit('https://www.unicef.fr/se-connecter/');
cy.get('#js-account-login-input-id').type("01223442342");

关于如何停止自动滚动的任何想法，或者我做错了什么？

Answer 1

本质上，你需要给type命令添加一个选项

cy.get('#js-account-login-input-id')
  .type("01223442342", {scrollBehavior: 'center'})

我看到有两件事阻止了对输入的访问

• 带有模态背景的 cookie 弹出窗口首先覆盖输入对话框
• .type() 命令将输入​​放置在屏幕顶部，但将其放置在隐藏的菜单下方

这是完整的测试，我添加了 cy.viewport() 只是为了让显示更好。

cy.viewport(1500,1000)
cy.visit('https://www.unicef.fr/se-connecter/')

cy.contains('button', "C'est OK pour moi").click()       // accept cookies

cy.get('#js-account-login-input-id')
  .type("01223442342", {scrollBehavior: 'center'})

---

请注意，如果 cookie 弹出窗口有时不出现(可能取决于您所在的地区)，您需要有条件地对待它 - 即只有在 4 秒内出现才单击。

为此，添加 cypress-if package到项目。

然后在 cookie 按钮 click() 之前添加 .if() 命令。

cy.contains('button', "C'est OK pour moi")
  .if()                                        // does cookie button show?
  .click()                                     // accept cookies