如何保存元素的文本供以后在测试中使用

Question

I want to get the text of a displayed time on a website.

The object looks like this

<strong class="date-time ng-tns-c226-30 ng-star-inserted">Dec 14, 2022, 5:07:08 PM</strong>

I want to change the timezone on the website and then get the text-content of it again and compare whether the changes are correct.

I've tried this:

cy.get('.date-time').invoke("text").as("oldtext")
cy.log("saved text: " + this.oldtext)

//Do some changes

cy.get('.date-time').invoke("text").as("newtext")
cy.log("saved text: " + this.newtext)

//Do comparison with the two strings

I have also tried doing this with resolving the promise that .invoke() returns but I have not found a way to get the text as string outside of a .then() block

let currentTime;
cy.get('.date-time') // select the element that displays the time
   .then(element => {
       currentTime = element.text()// get the text content of the element
       cy.log("inside: " + element.text()) // log the time inside the callback function
   });
cy.log("outside: " + currentTime)

But this always resulted in the output of the log being as follows

log inside: Dec 14, 2022, 5:07:08 PM
log outside: undefined

Answer 1

To compare old and new text, you can track an element's changing property by saving the old values on the element.

cy.get('.date-time')
  .then($el => $el.oldtext = $el.text())    // save the text at this time

//Do some changes

cy.get('.date-time')
  .then($el => {
    expect($el.oldtext).not.to.eq($el.text())
  })

---

It's very useful for multiple "snapshots", like testing (x,y) positions in drag-and-drop. In this case, there may be many values, and you can just save them in an array.

BUT be careful if testing a React page and //Do some change causes the element to be re-created.

In that case, you loose the old value, and you are better off saving the value externally

let oldtext;

cy.get('.date-time')
  .then($el => oldtext = $el.text())    // save the text at this time

//Do some changes

cy.get('.date-time')
  .then($el => {
    expect(oldtext).not.to.eq($el.text())
  })

Answer 2

cy.log() has some interesting behavior when it enqueues the values to log, namely that it will evaluate the string when it is enqueued and not when it is actually run.

For example, the following:

let myVar = "foo";
cy.log(myVar) // prints "foo"
  .then(() => {
    myVar = "bar";
  })
  .log(myVar) // prints "foo"

To avoid this, this easiest way using aliases would be to only use cy.log() inside of a command in a Cypress chain, so it isn't enqueued before the value is set.

cy.get('.date-time').invoke("text").as("oldtext")
cy.get('@oldtext').then((oldText) => {
  cy.log(oldText);
});

If you need to compare the oldText and newText , you can do so by nesting the cy.get() commands.

cy.get('@oldText').then((oldText) => {
  cy.get('@newText').then((newText) => {
    cy.log(oldText);
    cy.log(newText);
  });
});

If you instead did not want to use aliases at all, you could store the values as Cypress.env() variables.

cy.get('.date-time').invoke("text").then((oldText) => {
  Cypress.env('oldText', oldText);
});
// changes
cy.get('.date-time').invoke("text").then((newText) => {
  Cypress.env('newText', newText);
});
cy.then(() => {
  expect(Cypress.env('oldText')).to.not.eql(Cypress.env('newText'));
});