Cypress.io - 使用 JavaScript window.prompt 保存值

Question

我是 Cypress 的新手，遇到了问题。

我的应用程序，我有一个 "Save Button"。当你点击按钮时，它被触发 JS window.prompt()。在提示中输入保存的名称（如 "Save from John"）并单击 "OK" - 在提示中。

我需要通过 Cypress.io 中的 E2E 测试来覆盖这个用户故事。

问题是，当我点击"Save button"，cypress freeze in Click() event，显示提示的时候。

it('Make a new save with JS prompt', () => {
   cy.get('#save-changes-button')
   .should('be.visible')
   .click() //here the prompt is displayed, cypress stop and wait for click() event finish
})

我可以寻求帮助吗？我没有在 Cypress.io 文档或其他地方找到合适的解决方案。

Answer 1

好的，事实上，Cypress.io的当前版本不支持与window事件的交互。作弊方法是cy.stub()方法

这是我的解决方案。场景：

单击 GUI 中的 "Save Button"。
window.prompt() 已打开。
将存档名称（如"Saved by Thomas"）写入提示。
在提示中单击 "OK" 并保存值。

Cypress 中的代码：

    it('Save the value inside Prompt', () => {
            cy.window().then(win => {
                cy.stub(win, 'prompt').returns('The value you write inside prompt')
                cy.get('#save-changes-in-gui-button').click();
                //... Saved value assert
            })
    })

Cypress 默认通过存根更改 window.pompt() 事件并模拟点击 "OK"。这个解决方案现在对我有用。希望，它可以帮助别人:)

Answer 2

HTML 边:

<button id="createDirectory" (click)="createDirectory()">Create</button>

createDirectory() 函数提示输入目录名称

JAVASCRIPT 边:

createDirectory() {
  const x = prompt('Enter directory name');
  console.log(x);
}

如何在赛普拉斯中实现这一点？

it('Creating new directory level 1', () => {
    cy.window().then(win => {
        /* In case of writing something in prompt, use stub and then click on button on which prompt opens */
        cy.stub(win, 'prompt').returns('level1');
        cy.get('button#createDirectory').click();
    });
});

level1: 我们将在提示框中写入的字符串

Cypress.io - 使用 JavaScript window.prompt 保存值

Cypress.io - save value with JavaScript window.prompt

javascript

testing

integration-testing

e2e-testing

cypress