Сломались тесты из глубокого Cypress #22

SvetlanaVet · 2023-01-30T12:18:50Z

SvetlanaVet
Jan 30, 2023
Collaborator

Из 17 тестов отработало 2 теста, 3 упало, остальные просто не запустились, по причине, что ошибка в beforeEach, это совсем непонятно, потому что в beforeEach, находится только

beforeEach(() => {
    cy.visit("http://localhost:3000/apps/deep-cypress.html");
  });

и до этого в 5 тестах он отработал и вдруг сломался.

Ниже находится файлs deep-cypress.html, из http://localhost:3000/apps/, он отличается от того, который сейчас используется в туториале (мой более старый) и файл с кодом deep-cypress.cy.js.
В такой комбинации в версиях 10 и 11 все работает.

deep-cypress.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Cypress in deep</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      html {
        scroll-behavior: smooth;
      }

      div {
        border: 1px solid red;
        margin: 5px 0;
        padding: 5px;
      }

      button {
        background-color: silver;
        padding: 5px 10px;
        border-radius: 10px;
      }
    </style>
  </head>

  <body>
    <h1>Make screenshots</h1>
    <section data-cy="make-screenshots">
      <input name="user" />
    </section>

    <h1>Long like</h1>
    <section data-cy="long-like">
      <button type="button" onclick="like()">Like</button>

      <style>
        [data-cy="make-screenshots"] input[name="user"] {
          font-size: 3em;
        }
      </style>

      <script>
        function like() {
          const section = document.querySelector("section[data-cy=long-like]");
          const button = section.querySelector("button");
          button.disabled = true;
          button.innerHTML = "Processing 5 sec...";

          setTimeout(() => {
            const success = document.createElement("div");
            success.setAttribute("data-cy", "success");
            success.innerHTML = "Well done!";
            section.appendChild(success);

            section.removeChild(button);
          }, 5000);
        }
      </script>
    </section>

    <h1>Find child in tree</h1>
    <section data-cy="child-in-tree">
      <button type="button" onclick="tree()">Start tree</button>

      <script>
        function tree() {
          const section = document.querySelector(
            "section[data-cy=child-in-tree]"
          );
          const button = section.querySelector("button");
          button.disabled = true;
          button.innerHTML = "Processing...";

          setTimeout(() => {
            section.innerHTML = `<div data-cy="daddy">
                            I am daddy
                            <p class="loading">Loading children...</p>
                    </div>
                    `;

            setTimeout(() => {
              section.innerHTML = `<div data-cy="daddy">
                            I am new daddy with children
                            <div data-cy="child">I am child X</div>
                        </div>`;
            }, 1000);
          }, 1000);
        }
      </script>
    </section>

    <h1>Open Conduit in link</h1>
    <section data-cy="open-conduit-by-link">
      <a target="_blank" href="https://demo.realworld.io/">Open Conduit</a>
    </section>

    <h1>Open Conduit as window</h1>
    <section data-cy="open-conduit-in-window">
      <button type="button" onclick="window.open('https://demo.realworld.io/')">
        Open Conduit
      </button>
    </section>

    <h1>Open Conduit signup in iframe</h1>
    <section data-cy="open-conduit-in-iframe">
      <iframe src="about:blank" style="window: 100%; height: 400px"></iframe>

      <script>
        setTimeout(() => {
          document
            .querySelector("[data-cy=open-conduit-in-iframe] iframe")
            .setAttribute("src", "https://demo.realworld.io/");
        }, 3000);
      </script>
    </section>

    <h1>Hello from user</h1>
    <section data-cy="hello-from-user">
      <p>User should say hello.</p>
      <user-web-component></user-web-component>

      <script>
        {
          const component = document.querySelector("user-web-component");
          component.attachShadow({ mode: "open" });
          component.shadowRoot.innerHTML = `
                    <style>p { color: red; }</style>
                    <p class="hello">Hello from shadow Elon!</p>`;
        }
      </script>
    </section>

    <h1>Change my DOM</h1>
    <section data-cy="change-dom">
      <p>Please change me now.</p>

      <script>
        function callMe(phone) {
          const section = document.querySelector("[data-cy=change-dom]");
          const link = document.createElement("a");
          link.setAttribute("href", "tel:" + phone);
          link.innerText = phone;
          section.appendChild(link);
        }
      </script>
    </section>

    <h1>Mouse long down</h1>
    <section data-cy="mouse-long-down">
      <button onmousedown="longDown()">Press me long</button>

      <script>
        let timer;
        function longDown() {
          const section = document.querySelector("[data-cy=mouse-long-down]");
          const button = section.querySelector("button");
          button.style.backgroundColor = "yellow";
          let i = 0;
          timer = setInterval(() => {
            i += 0.1;
            button.innerHTML = "You pressing " + i.toFixed(2) + " sec.";
          }, 100);

          document.onmouseup = () => {
            clearInterval(timer);
            button.innerHTML = "Press me long";
            button.style.backgroundColor = "silver";
          };
        }
      </script>
    </section>

    <h1>Mouse move</h1>
    <section data-cy="mouse-move">
      <div class="canvas"></div>

      <style>
        .canvas {
          height: 200px;
          cursor: none;
        }

        .canvas .success {
          color: green;
          font-size: 20px;
          position: absolute;
        }

        .point {
          width: 5px;
          height: 5px;
        }
      </style>

      <script>
        {
          const section = document.querySelector("[data-cy=mouse-move]");
          const canvas = section.querySelector(".canvas");
          const message = document.createElement("div");
          message.className = "success";
          message.innerHTML = "You win!";
          canvas.onmousemove = (e) => {
            const point = document.createElement("div");
            point.className = "point";
            point.style.position = "absolute";
            const x = e.pageX - 10;
            const y = e.pageY - 10;
            point.style.left = x + "px";
            point.style.top = y + "px";
            canvas.appendChild(point);

            if (e.pageX > 600) {
              canvas.appendChild(message);
              canvas.onmousemove = () => null;
            } else {
              setTimeout(() => canvas.removeChild(point), 500);
            }
          };
        }
      </script>
    </section>

    <h1>Check on mobile</h1>
    <section data-cy="check-in-mobile">
      <p>See nice gif only on mobile.</p>
      <div class="for-mobile">
        <iframe
          src="https://giphy.com/embed/ueVQiEIDXtOV6oQhOW"
          width="100%"
          height="100%"
          frameborder="0"
          class="giphy-embed"
          allowfullscreen
        ></iframe>
      </div>

      <style>
        .for-mobile iframe {
          opacity: 0;
          height: 400px;
        }

        .giphy-embe {
          pointer-events: none;
        }

        @media (max-width: 425px) {
          .for-mobile iframe {
            transition: opacity 3s;
            opacity: 1;
          }
        }
      </style>
    </section>

    <h1>Catch HTTP requests</h1>
    <section data-cy="catch-http">
      <div class="info">Please press on button</div>
      <button onclick="loadUser()">Load user</button>

      <script>
        const section = document.querySelector("[data-cy=catch-http]");
        const info = section.querySelector(".info");
        function loadUser() {
          var xmlHttp = new XMLHttpRequest();
          xmlHttp.open(
            "GET",
            "https://jsonplaceholder.typicode.com/users/1",
            false
          );
          xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              const user = JSON.parse(xmlHttp.responseText);
              console.log(user);
              info.innerHTML = user.name;
            }
          };
          xmlHttp.send(null);
        }
      </script>
    </section>

    <h1>Navigation</h1>
    <section data-cy="navigation">
      <a class="path" href="/">By path</a>
      |
      <a class="query" href="?q=test">By query</a>
      |
      <a class="hash" href="#/page">By hash</a>
    </section>

    <h1>Grab user data</h1>
    <section data-cy="grab-users">
      <table>
        <thead>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </thead>
        <tbody>
          <tr>
            <td>Elon</td>
            <td>Musk</td>
            <td>elon@gmail.com</td>
          </tr>
          <tr>
            <td>Bill</td>
            <td>Gates</td>
            <td>bill@gmail.com</td>
          </tr>
        </tbody>
      </table>

      <style>
        [data-cy="grab-users"] table th,
        td {
          border: 1px solid gray;
          border-collapse: collapse;
          padding: 5px;
          margin: 0;
        }
      </style>
    </section>
  </body>
</html>

Answered by Vladimir-Tarasov

Jan 31, 2023

New solution.

it("should do open conduit by link", () => {
        cy.get("section[data-cy=open-conduit-by-link]").as("section");
        cy.get("@section").find("a").invoke("removeAttr", "target").click({ timeout: 5000 });
        cy.origin('https://demo.realworld.io/', () => {
            cy.title().should("contain", "Conduit");
        });
    });

@SvetlanaVet check please.

https://www.cypress.io/blog/2022/12/06/announcing-cypress-12/
https://www.cypress.io/blog/2022/12/02/the-journey-behind-cy-origin/

View full answer

SvetlanaVet · 2023-01-30T12:19:45Z

SvetlanaVet
Jan 30, 2023
Collaborator Author

deep-cypress.cy.js

describe("Deep cypress", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000/apps/deep-cypress.html");
  });

  it("should do long like", () => {
    cy.get("section[data-cy=long-like]").as("section");
    cy.get("@section").find("button").click();

    cy.get("@section")
      .find("[data-cy=success]")
      .should("have.text", "Well done!");
  });

  it("should do find child in tree", () => {
    cy.get("section[data-cy=child-in-tree]").as("section");
    cy.get("@section").find("button").click();
    //cy.get("@section").find("[data-cy=daddy]").should("be.visible").find("[data-cy=child]").should("be.visible");
    //cy.get("@section").find("[data-cy=daddy]").should("be.visible");
    cy.get("@section")
      .find("[data-cy=daddy]")
      .should("not.contain", "Loading")
      .find("[data-cy=child]")
      .should("not.contain", "Loading");
  });

  it("should do open conduit by link", () => {
    cy.get("section[data-cy=open-conduit-by-link]").as("section");
    cy.get("@section").find("a").invoke("removeAttr", "target").click();
    cy.title().should("contain", "Conduit");
  });

  it("should do open conduit in window", () => {
    cy.get("section[data-cy=open-conduit-in-window]").as("section");

    cy.window().then((window) => {
      cy.stub(window, "open").callsFake((url) => {
        console.log("we have implemented window.open function");
        window.location = url;
      });
    });

    cy.get("@section").find("button").click();
    cy.title().should("contain", "Conduit");
  });

  it("should do open conduit signup in iframe", () => {
    cy.get("section[data-cy=open-conduit-in-iframe]").as("section");
    cy.get("@section")
      .find("iframe")
      .its("0.contentDocument.body")
      .should("not.be.empty")
      .as("conduit");
    cy.get("@conduit").find('.navbar a[href$="/register"]').click();
    cy.get("@conduit").find(".auth-page h1").should("have.text", "Sign up");
  });

  it("should do check hello from user", () => {
    cy.get("section[data-cy=hello-from-user]").as("section");
    cy.get("@section").find("user-web-component").shadow().as("user");
    cy.get("@user").find("p.hello").should("contain.text", "Hello from");
  });

  it("should do change DOM", () => {
    cy.get("section[data-cy=change-dom]").as("section").scrollIntoView();
    cy.get("@section").find("p").as("message");
    cy.get("@message").invoke("css", "background-color", "rgb(0, 128, 0)");
    cy.get("@message").should("have.css", "background-color", "rgb(0, 128, 0)");
    // wait just for demo

    cy.wait(2000);
    cy.get("@message").invoke("css", "background-color", "rgb(128, 0, 0)");
    cy.get("@message").should("have.css", "background-color", "rgb(128, 0, 0)");

    const phone = "+7 920 736-12-49";
    cy.window().invoke("callMe", phone);

    cy.get("@section")
      .invoke("html")
      .should("contain", '<a href="tel:' + phone + '">' + phone + "</a>");
  });

  it("should do check long mouse down", () => {
    cy.get("section[data-cy=mouse-long-down]").as("section");
    cy.get("@section").find("button").as("button").trigger("mousedown");
    cy.wait(3000);
    cy.get("@button").should("contain.text", "3.00 sec.");
    cy.get("@button").trigger("mouseup");
  });

  it("should do check mouse move", () => {
    cy.get("section[data-cy=mouse-move]").as("section");
    cy.get("@section").find(".canvas").as("canvas");

    cy.get("@canvas")
      .then((e) => e.position())
      .its("top")
      .as("top");

    cy.get("@top")
      .should("not.null")
      .then((top) => {
        for (let i = 200; i < 610; i += 10) {
          cy.get("@canvas").trigger("mousemove", {
            pageX: 100 + i,
            pageY: top + 100 + Math.sin(i / 20) * 20,
          });
          cy.wait(150);
        }
      });

    cy.get("@canvas").find(".success").should("have.text", "You win!");
  });

  it("should do check in mobile", () => {
    cy.get("section[data-cy=check-in-mobile]")
      .should("be.visible")
      .as("section")
      .scrollIntoView();
    cy.get("@section")
      .find("iframe")
      .as("giphy")
      .should("have.css", "opacity", "0");
    cy.viewport("iphone-4");
    cy.get("@giphy").should("have.css", "opacity", "1");
  });

  it("should do make screenshots", () => {
    cy.get("section[data-cy=make-screenshots]")
      .should("be.visible")
      .as("section")
      .scrollIntoView();
    cy.get("@section").screenshot("before");
    cy.get("@section")
      .find("input[name=user]")
      .type("Anton")
      .invoke("css", "background", "green");
    cy.get("@section").screenshot("after");
  });

  it("should do catch get user HTTP request", () => {
    cy.get("section[data-cy=catch-http]").should("be.visible").as("section");
    cy.get("@section").find("button").as("button").click();

    cy.get("@section")
      .find(".info")
      .as("info")
      .should("have.text", "Leanne Graham");

    cy.intercept("GET", "/users/1", {
      statusCode: 200,
      body: {
        name: "Bob Marley",
        telegram: "https://t.me/epic_one_hour",
      },
    }).as("loadUser");

    cy.get("@button").click();
    cy.wait("@loadUser");

    cy.get("@info").should("have.text", "Bob Marley");
  });

  describe("Navigation", () => {
    beforeEach(() => {
      cy.get("section[data-cy=navigation]")
        .should("be.visible")
        .as("navigation");
    });

    it("should navigate by path", () => {
      cy.get("@navigation").find("a.path").click();
      cy.location("pathname").should("eq", "/");
      cy.location("pathname").then((path) => cy.log(path));
    });

    it("should navigate by query", () => {
      cy.get("@navigation").find("a.query").click();
      cy.location("search").should("eq", "?q=test");
    });

    it("should navigate by hash", () => {
      cy.get("@navigation").find("a.hash").click();
      cy.location("hash").should("eq", "#/page");
    });
  });

  it("should do grab users", () => {
    cy.get("section[data-cy=grab-users]")
      .should("be.visible")
      .as("section")
      .scrollIntoView();

    cy.get("@section")
      .find("table tbody tr")
      .should("have.length.greaterThan", 0)
      .then((rows) => {
        let users = [];
        for (const row of rows) {
          const user = [];
          for (const cell of row.children) {
            user.push(cell.innerText);
          }
          users.push(user);
        }
        return users;
      })
      .as("users");

    cy.get("@users").then((users) => cy.writeFile("tmp/users.json", users));
    cy.readFile("tmp/users.json")
      .should("not.be.empty")
      .then((users) => {
        cy.log(users);
      });
  });

  it("should do check hero", () => {
    console.log("a");
    cy.log("a");

    let ourHero = "Spider Man";

    const asyncOperation = new Cypress.Promise((done) => {
      setTimeout(() => {
        done("Iron Man");
      }, 2000);
    });

    cy.wrap(asyncOperation)
      .then((hero) => {
        console.log("b");
        cy.log("b");

        ourHero = hero;
        cy.log(ourHero);
      })
      .as("hero");

    console.log("c");
    cy.log("c");

    console.log(ourHero);

    cy.get("@hero").should("eq", "Iron Man");
  });
});

0 replies

SvetlanaVet · 2023-01-30T12:24:01Z

SvetlanaVet
Jan 30, 2023
Collaborator Author

скрины ошибок
should do open conduit by link https://disk.yandex.com/i/tg-46ViCX2g7mw
should do open conduit in window https://disk.yandex.com/i/90bW5z_x6AZuzQ
should do open conduit signup in iframe https://disk.yandex.com/i/pylg3kRH1YVe_A

0 replies

breslavsky · 2023-01-30T13:19:28Z

breslavsky
Jan 30, 2023
Maintainer

@Vladimir4932 please try reproduce the problem. Please think how to work with @SvetlanaVet more effective.

0 replies

Vladimir-Tarasov · 2023-01-31T09:29:21Z

Vladimir-Tarasov
Jan 31, 2023
Collaborator

@SvetlanaVet what cypress version do you use?

0 replies

SvetlanaVet · 2023-01-31T09:54:52Z

SvetlanaVet
Jan 31, 2023
Collaborator Author

Sorry, I use version 12.4.1

0 replies

Vladimir-Tarasov · 2023-01-31T12:15:04Z

Vladimir-Tarasov
Jan 31, 2023
Collaborator

I can reproduce it.
In tests Open conduit by link

it("should do open conduit by link", () => {
    cy.get("section[data-cy=open-conduit-by-link]").as("section");
    cy.get("@section").find("a").invoke("removeAttr", "target").click();
    cy.title().should("contain", "Conduit");
  });

and Open conduit in window

it("should do open conduit in window", () => {
    cy.get("section[data-cy=open-conduit-in-window]").as("section");

    cy.window().then((window) => {
      cy.stub(window, "open").callsFake((url) => {
        console.log("we have implemented window.open function");
        window.location = url;
      });
    });

cy.title() yields '' but not 'Conduit'. I can't find a reason.

And test Open conduit signup in iframe

it("should do open conduit signup in iframe", () => {
    cy.get("section[data-cy=open-conduit-in-iframe]").as("section");
    cy.get("@section")
      .find("iframe")
      .its("0.contentDocument.body")
      .should("not.be.empty")
      .as("conduit");
    cy.get("@conduit").find('.navbar a[href$="/register"]').click();
    cy.get("@conduit").find(".auth-page h1").should("have.text", "Sign up");
  });

All errors with tests to open Conduit in another window or in the iframe. I can't find the reason. @breslavsky assist please.

0 replies

Vladimir-Tarasov · 2023-01-31T12:58:24Z

Vladimir-Tarasov
Jan 31, 2023
Collaborator

New solution.

it("should do open conduit by link", () => {
        cy.get("section[data-cy=open-conduit-by-link]").as("section");
        cy.get("@section").find("a").invoke("removeAttr", "target").click({ timeout: 5000 });
        cy.origin('https://demo.realworld.io/', () => {
            cy.title().should("contain", "Conduit");
        });
    });

@SvetlanaVet check please.

https://www.cypress.io/blog/2022/12/06/announcing-cypress-12/
https://www.cypress.io/blog/2022/12/02/the-journey-behind-cy-origin/

1 reply

SvetlanaVet Jan 31, 2023
Collaborator Author

That works. Thank you!

Vladimir-Tarasov · 2023-01-31T13:25:00Z

Vladimir-Tarasov
Jan 31, 2023
Collaborator

it("should do open conduit in window", () => {
        cy.get("section[data-cy=open-conduit-in-window]").as("section");

        cy.window().then((window) => {
            cy.stub(window, "open").callsFake((url) => {
                console.log("we have implemented window.open function");
                window.location = url;
            });
        });

        cy.get("@section").find("button").click();
        cy.origin('https://demo.realworld.io/', () => {
            cy.title().should("contain", "Conduit");
        });
    });

1 reply

SvetlanaVet Jan 31, 2023
Collaborator Author

That works too.

Vladimir-Tarasov · 2023-01-31T13:51:34Z

Vladimir-Tarasov
Jan 31, 2023
Collaborator

@breslavsky i can't find solution for iframe. Assist please.

0 replies

Vladimir-Tarasov · 2023-02-02T12:39:41Z

Vladimir-Tarasov
Feb 2, 2023
Collaborator

@SvetlanaVet please add "chromeWebSecurity": false to cypress.config.js.

Link to tutorial

1 reply

SvetlanaVet Feb 2, 2023
Collaborator Author

I'm so sorry! I forgot about that. Now that works
Thanks.

Add to cypress.config.js

SvetlanaVet · 2023-02-02T15:18:53Z

SvetlanaVet
Feb 2, 2023
Collaborator Author

another test failed, last of all
https://monosnap.com/file/jmgZaVlE3uzTFPEoB70rm6rH1cjUzu

2 replies

Vladimir-Tarasov Feb 2, 2023
Collaborator

Will check

breslavsky Feb 13, 2023
Maintainer

@Vladimir4932 2 week ago. Do you have any updates here?

Сломались тесты из глубокого Cypress #22

Uh oh!

SvetlanaVet Jan 30, 2023 Collaborator

Replies: 11 comments · 5 replies

Uh oh!

SvetlanaVet Jan 30, 2023 Collaborator Author

Uh oh!

Uh oh!

SvetlanaVet Jan 30, 2023 Collaborator Author

Uh oh!

breslavsky Jan 30, 2023 Maintainer

Uh oh!

Vladimir-Tarasov Jan 31, 2023 Collaborator

Uh oh!

SvetlanaVet Jan 31, 2023 Collaborator Author

Uh oh!

Vladimir-Tarasov Jan 31, 2023 Collaborator

Uh oh!

Uh oh!

Vladimir-Tarasov Jan 31, 2023 Collaborator

Uh oh!

SvetlanaVet Jan 31, 2023 Collaborator Author

Uh oh!

Vladimir-Tarasov Jan 31, 2023 Collaborator

Uh oh!

SvetlanaVet Jan 31, 2023 Collaborator Author

Uh oh!

Vladimir-Tarasov Jan 31, 2023 Collaborator

Uh oh!

Vladimir-Tarasov Feb 2, 2023 Collaborator

Uh oh!

SvetlanaVet Feb 2, 2023 Collaborator Author

Uh oh!

SvetlanaVet Feb 2, 2023 Collaborator Author

Uh oh!

Vladimir-Tarasov Feb 2, 2023 Collaborator

Uh oh!

breslavsky Feb 13, 2023 Maintainer

SvetlanaVet
Jan 30, 2023
Collaborator

Replies: 11 comments 5 replies

SvetlanaVet
Jan 30, 2023
Collaborator Author

SvetlanaVet
Jan 30, 2023
Collaborator Author

breslavsky
Jan 30, 2023
Maintainer

Vladimir-Tarasov
Jan 31, 2023
Collaborator

SvetlanaVet
Jan 31, 2023
Collaborator Author

Vladimir-Tarasov
Jan 31, 2023
Collaborator

Vladimir-Tarasov
Jan 31, 2023
Collaborator

SvetlanaVet Jan 31, 2023
Collaborator Author

Vladimir-Tarasov
Jan 31, 2023
Collaborator

SvetlanaVet Jan 31, 2023
Collaborator Author

Vladimir-Tarasov
Jan 31, 2023
Collaborator

Vladimir-Tarasov
Feb 2, 2023
Collaborator

SvetlanaVet Feb 2, 2023
Collaborator Author

SvetlanaVet
Feb 2, 2023
Collaborator Author

Vladimir-Tarasov Feb 2, 2023
Collaborator

breslavsky Feb 13, 2023
Maintainer