[Internship] Cypress E2E Web Automation | Interacting with Elements | Alerts

1. Javascript Alert: It will have some text and an 'OK' button

2. Javascript Confirm Alert: It will have some text with 'OK' and 'Cancel' buttons

3. Javascript Prompt Alert: It will have some text with a text box for user input along with 'OK'

4. Authenticated Alert

 

 

Stub

A stub is a way to modify a function and delegate control over its behavior to you (the programmer).

A stub is most commonly used in a unit test but is still useful during some integration/e2e tests.

// create a standalone stub (generally for use in unit test)
cy.stub()

// replace obj.method() with a stubbed function
cy.stub(obj, 'method')

// force obj.method() to return "foo"
cy.stub(obj, 'method').returns('foo')

// force obj.method() when called with "bar" argument to return "foo"
cy.stub(obj, 'method').withArgs('bar').returns('foo')

// force obj.method() to return a promise which resolves to "foo"
cy.stub(obj, 'method').resolves('foo')

// force obj.method() to return a promise rejected with an error
cy.stub(obj, 'method').rejects(new Error('foo'))

You generally stub a function when it has side effects you are trying to control.

Common Scenarios:​

• You have a function that accepts a callback, and want to invoke the callback.
• Your function returns a Promise, and you want to automatically resolve or reject it.
• You have a function that wraps window.location and don't want your application to be navigated.
• You're trying to test your application's "failure path" by forcing things to fail.
• You're trying to test your application's "happy path" by forcing things to pass.
• You want to "trick" your application into thinking it's logged in or logged out.
• You're using oauth and want to stub login methods.

 

describe("Alerts", () => {
  // 1. Javascript Alert: It will have some text and an 'OK' button
  it.skip("JS alert - ok button", () => {
    cy.visit("http://the-internet.herokuapp.com/javascript_alerts");
    cy.get("button[onclick='jsAlert()']").click();
    cy.on("window:alert", (t) => {
      expect(t).to.contains("I am a JS Alert");
    });
    // alert window automatically closed by cypress
    cy.get("#result").should("have.text", "You successfully clicked an alert");
  });
  //   2. Javascript Confirm Alert: It will have some text with 'OK' and 'Cancel' buttons
  it.skip("JS confirmation alert - ok", () => {
    cy.visit("http://the-internet.herokuapp.com/javascript_alerts");
    cy.get("button[onclick='jsConfirm()']").click();
    cy.on("window:confirm", (t) => {
      expect(t).to.contains("I am a JS Confirm");
    });
    // cypress automatically closed alert window by using ok button-default
    cy.get("#result").should("have.text", "You clicked: Ok");
  });
  it.skip("JS confirmation alert - cancel", () => {
    cy.visit("http://the-internet.herokuapp.com/javascript_alerts");
    cy.get("button[onclick='jsConfirm()']").click();
    cy.on("window:confirm", () => false);
    // cypress automatically closed alert window by using cancel button-default
    // opposite case is true (ok button)
    cy.get("#result").should("have.text", "You clicked: Cancel");
  });
  // 3. Javascript Prompt Alert: It will have some text with a text box for user input along with 'OK'
  it.skip("JS prompt alert", () => {
    cy.visit("http://the-internet.herokuapp.com/javascript_alerts");
    cy.window().then((win) => {
      cy.stub(win, "prompt").returns("welcome");
    });
    cy.get("button[onclick='jsPrompt()']").click();
    // cypress will automatically close prompted alert - it will use OK button- by default
    cy.get("#result").should("have.text", "You entered: welcome");
  });
  it.skip("JS prompt alert", () => {
    cy.visit("http://the-internet.herokuapp.com/javascript_alerts");
    cy.window().then((win) => {
      cy.stub(win, "prompt").returns("welcome");
    });
    cy.on("window:prompt", () => false);
    // cypress will automatically close prompted alert - it will use OK button- by default
    cy.get("#result").should("have.text", "You entered: null");
  });
  // 4. Authenticated Alert
  it.only("JS authenticated alert", () => {
    // approach 1
    // cy.visit("https://the-internet.herokuapp.com/basic_auth", {
    //   auth: { username: "admin", password: "admin" },
    // });
    // cy.get("div[class='example'] p").should("have.contain", "Congratulations");

    // approach 2
    cy.visit("https://admin:admin@the-internet.herokuapp.com/basic_auth");
    cy.get("div[class='example'] p").should("have.contain", "Congratulations");
  });
});

 

 

 

 

Sources

https://docs.cypress.io/api/cypress-api/catalog-of-events

Catalog of Events | Cypress Documentation

https://docs.cypress.io/api/commands/stub

stub | Cypress Documentation