Missing parts of documentation for Cypress.log - end, finish, get, st, snapshot

[shwarcu]

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?

[DamienCassou]

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();
  });
});

[DamienCassou]

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: cypress-io/cypress#15859.

[fzyzcjy]

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

[shwarcu]

@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

[jennifer-shehane]

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.

[QuantumAbraham]

@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.

[shahil-yadav]

@DamienCassou
@jennifer-shehane
@shwarcu
@fzyzcjy

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

I think maybe these snapshots() function are used to switch between states of the log. In this code, there are two log states: before and after. The before state shows how the log was before, and the after state shows how it is now.

If I pin the Login log, it displays these two states ie before after

Screen.Recording.2025-02-19.at.6.46.37.AM.mov

ig, the styles are brutal in the after state of Login log, haha

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();

});
});