Alert | Cypress | Test & QA

• Alert | Cypress | Test & QA

---

Código usado

describe("Alerts", () => {
    beforeEach(() => {
      cy.visit(`${Cypress.env("theInternet")}/javascript_alerts`);
    });
    it("JS Alert", () => {
      cy.contains("Click for JS Alert").click();
      cy.on("window:alert", (str) => {
        expect(str).to.equal("I am a JS Alert");
      });
      cy.on("window:confirm", () => true);
      cy.get("#result").should("have.text", "You successfully clicked an alert");
    });
  
    it("JS Confirm(accept)", () => {
      cy.contains("Click for JS Confirm").click();
      cy.on("window:confirm", (str) => {
        expect(str).to.equal(`I am a JS Confirm`);
      });
      cy.on("window:confirm", () => true);
      cy.get("#result").should("have.text", "You clicked: Ok");
    });
  
    it("JS Confirm(cancel)", () => {
      cy.contains("Click for JS Confirm").click();
      cy.on("window:confirm", (str) => {
        expect(str).to.equal(`I am a JS Confirm`);
      });
      cy.on("window:confirm", () => false);
      cy.get("#result").should("have.text", "You clicked: Cancel");
    });
  
    it("JS Prompt", () => {
      cy.window().then(($win) => {
        //Control prompt behavior
        cy.stub($win, "prompt").returns("This is a test text");
        cy.contains("Click for JS Prompt").click();
      });
      cy.get("#result").should("have.text", "You entered: This is a test text");
    });
  });
  
  describe("Typing on an Iframe using the internet app", () => {
    beforeEach(() => {
      cy.visit(`${Cypress.env("theInternet")}/iframe`);
    });
    it("Iframedemo", () => {
      cy.get("#mce_0_ifr").then(($iframe) => {
        const $body: JQuery<HTMLElement | Document | Text | Comment> = $iframe
          .contents()
          .find("body");
        cy.wrap($body).find("p").type("{selectAll}{del}Hello World");
      });
      cy.get("#mce_0_ifr").then(($iframe) => {
        const $body = $iframe.contents().find("body");
        cy.wrap($body).find("p").should("have.text", "Hello World");
      });
    });
  });

---

Estrutura do Cenário de Teste

describe("Alerts", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("theInternet")}/javascript_alerts`);
  });

Explicação:

• describe: agrupa testes relacionados a alertas JavaScript
• beforeEach: garante que a página de alertas seja carregada antes de cada teste
• A página contém botões que disparam diferentes tipos de alertas

---

1. JS Alert

it("JS Alert", () => {
  cy.contains("Click for JS Alert").click();
  cy.on("window:alert", (str) => {
    expect(str).to.equal("I am a JS Alert");
  });
  cy.on("window:confirm", () => true);
  cy.get("#result").should("have.text", "You successfully clicked an alert");
});

Explicação:

• cy.contains(...).click(): dispara o alerta simples
• cy.on("window:alert"): captura o texto do alert
• Valida a mensagem exibida
• O Cypress aceita automaticamente o alerta
• Valida a mensagem de resultado exibida na página

---

2. JS Confirm – Aceitando (OK)

it("JS Confirm(accept)", () => {
  cy.contains("Click for JS Confirm").click();
  cy.on("window:confirm", (str) => {
    expect(str).to.equal(`I am a JS Confirm`);
  });
  cy.on("window:confirm", () => true);
  cy.get("#result").should("have.text", "You clicked: Ok");
});

Explicação:

• Dispara o confirm
• Captura e valida o texto exibido
• Retorna true para simular o clique em OK
• Valida o resultado apresentado na página

---

3. JS Confirm – Cancelando

it("JS Confirm(cancel)", () => {
  cy.contains("Click for JS Confirm").click();
  cy.on("window:confirm", (str) => {
    expect(str).to.equal(`I am a JS Confirm`);
  });
  cy.on("window:confirm", () => false);
  cy.get("#result").should("have.text", "You clicked: Cancel");
});

Explicação:

• Dispara o mesmo confirm
• Retorna false para simular o clique em Cancel
• Valida o texto exibido após o cancelamento

---

4. JS Prompt

it("JS Prompt", () => {
  cy.window().then(($win) => {
    cy.stub($win, "prompt").returns("This is a test text");
    cy.contains("Click for JS Prompt").click();
  });
  cy.get("#result").should("have.text", "You entered: This is a test text");
});

Explicação:

• cy.window(): acessa o objeto window da aplicação
• cy.stub($win, "prompt"): sobrescreve o comportamento do prompt
• .returns(...): define o texto que será retornado automaticamente
• Dispara o prompt sem interação manual
• Valida o texto exibido como resultado

---