Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add example for stubbing typing text into window.prompt and confirming correct alert response #339

Closed
jennifer-shehane opened this issue Oct 11, 2019 · 5 comments
Closed

Add example for stubbing typing text into window.prompt and confirming correct alert response #339

jennifer-shehane opened this issue Oct 11, 2019 · 5 comments
Labels
first-timers-only

Comments

@jennifer-shehane
Copy link
Member

There is a full example here: cypress-io/cypress#5316 (comment)

Should be added to this example folder https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window
@hazim
Copy link

hazim commented Oct 13, 2019

Hi @jennifer-shehane
How can one do that? am I meant to copy the content and paste it in as a new markdown file?
Would love to learn how this is done or if you could refer me to some place to read up on it.

Many thanks.

@jennifer-shehane
Copy link
Member Author

The example is linked in the comment above. Will paste the content here:

Example index.html of my test application, but essentially when a button is clicked, a window prompt appears.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Stubbing Window Prompt</title>
</head>
<body>
    <ul>
        <li>
            <h1>My Application</h1>
            <button id="prompt">Prompt</button>
        </li>
    </ul>

    <script>
        var btn = document.getElementById('prompt')
        btn.addEventListener('click', function (event) {
            let sign = prompt("What's your sign?");

            if (sign === "scorpio") {
                alert("Wow! I'm a Scorpio too!");
            }
        })
    </script>
</body>
</html>

My Cypress test file.

  1. We are stubbing the text that is entered into the prompt, this will be 'faking' as if a real user typed this.
  2. We are spying on the 'alert' - which is the 'success' message that displays after the text is entered. Then we are asserting that the correct message is displayed - which would test whether they wrote 'scorpio' in my case.
it('window prompt test', function () {
  cy.visit('/index.html', {
    onBeforeLoad(win) {
      cy.stub(win, 'prompt').returns('scorpio')
      cy.stub(win, 'alert').as('windowAlert')
    }
  })
  
  cy.get('#prompt').click().then(function () {
    expect(this.windowAlert).to.be.calledWith('Wow! I\'m a Scorpio too!')
  })
})

This is the result in the Cypress Test Runner after, notice that you can click within the Command Log to see more details about Spies/Stubs.

Screen Shot 2019-10-11 at 2 24 45 PM

You will no longer see the 'prompt' window pop up and stop execution of the tests since we're handling the type and confirm in Cypress tests.

@hazim
Copy link

hazim commented Oct 17, 2019

Thanks @jennifer-shehane for getting back on this!

Could I have a try at it?

@jennifer-shehane
Copy link
Member Author

@hazim Sure!

@gabbersepp gabbersepp mentioned this issue Nov 8, 2019
Closed
This was referenced Dec 31, 2019
Closed
Closed
@arvinderloyalty
Copy link

Hey @jennifer-shehane thanks for providing the work around. However, in my application when I set password and click on confirm button, the different URL opens in the same tab which ask for QA environment credentials in the alert window. The above code is working for that flow. Could you please suggest something else?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
first-timers-only
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hazim @jennifer-shehane @arvinderloyalty