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

【问题标题】：Cypress.io - save value with JavaScript window.promptCypress.io - 使用 JavaScript window.prompt 保存价值
【发布时间】：2019-02-18 09:07:46
【问题描述】：

我是赛普拉斯的新手，我遇到了问题。

在应用程序中，我有一个“保存按钮”。当你点击按钮时，会触发JSwindow.prompt()。在提示中输入保存的名称（如“从 John 保存”）并单击“确定” - 在提示中。

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

问题是，当我单击“保存按钮”时，当显示提示时，cypress 在 Click() 事件中冻结。

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 Docs 或其他地方找到合适的解决方案。

【问题讨论】：

标签： javascript testing integration-testing e2e-testing cypress

【解决方案1】：

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

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

在 GUI 中单击“保存按钮”。
window.prompt() 已打开。
将保存名称（如“Thomas 保存”）写入提示。
在提示中单击“确定”并保存该值。

还有 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
            })
    })

默认情况下，赛普拉斯通过存根更改window.pompt() 事件并模拟单击“确定”。这个解决方案现在对我有用。希望，它可以帮助别人:)

【讨论】：

【解决方案2】：

HTML 端：

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

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

JAVASCRIPT 端：

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

如何在 cypress 中实现这一点？

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: 我们将在提示框中写入的字符串

【讨论】：