cypress-documentation

cypress-documentation copied to clipboard

I'm submitting a...

[ ] Bug report
[X] Content update
[ ] Process update (build, deployment, ... )

Type of bug / changes

https://docs.cypress.io/api/cypress-api/cypress-log.html#Syntax

There is no information what are these methods for and how to use them. In case you don't wan to update documentation, could you explain here what are these for?

I completely agree with you @shwarcu.

Here is a Cypress Webinar containing some information: Webinar Patterns and Practices (slides) with this example:

Cypress.Commands.add("login", (username, password, rememberUser = false) => {
  const signinPath = "/signin";
  const log = Cypress.log({
    name: "login",
    displayName: "LOGIN",
    message: [`🔐 Authenticating | ${username}`],
    autoEnd: false,
  });

  cy.server();
  cy.route("POST", "/login").as("loginUser");
  cy.route("GET", "checkAuth").as("getUserProfile");

  cy.location("pathname", { log: false }).then((currentPath) => {
    if (currentPath !== signinPath) {
      cy.visit(signinPath);
    }
  });

  log.snapshot("before");

  cy.getBySel("signin-username").type(username);
  cy.getBySel("signin-password").type(password);

  if (rememberUser) {
    cy.getBySel("signin-remember-me").find("input").check();
  }

  cy.getBySel("signin-submit").click();
  cy.wait("@loginUser").then((loginUser: any) => {
    log.set({
      consoleProps() {
        return {
          username,
          password,
          rememberUser,
          userId: loginUser.response.body.user?.id,
        };
      },
    });

    log.snapshot("after");
    log.end();
  });
});

I'm not sure if it is a problem of missing documentation or of lack of feature, but here is a link to an issue with the Cypress.log() command: https://github.com/cypress-io/cypress/issues/15859.

Hi I wonder what is the definition of log.snapshot("before"); and log.snapshot("after");? Are they for visual tests, or for time traveling?

@fzyzcjy from experiments we have made it looks like this snapshot function is responsible for taking DOM snapshots for the Cypress runner, but I don't know yet how to use it ;)

Edit: from the example above I can guess that you can take 2 snapshots "before" and "after" and they will be displayed for your custom log when you click on it, just like you would click on a cy.click() command

The best documentation currently for Cypress.log can be found in this great blog post: https://filiphric.com/improve-your-custom-command-logs-in-cypress Everything in there is accurate.

@fzyzcjy @shwarcu @DamienCassou When writing custom commands, you may want to change the way the command log appears for many reasons e.g easy reading and debugging. Now log.snapshot("before") takes a snapshot of how your application appears before the code that follows it(snapshot before execution of code), log.snapshot("after") takes a snapshot of how your application appears after execution of the code before it(snapshot after execution of code). These two help in reducing the "noise" in the command log.