How to use getAngularVersion method in Cypress

I just came across this article that explains how and why you store a variable and then use it later in the "Cypress way":

https://www.stevenhicks.me/blog/2020/02/working-with-variables-in-cypress-tests/

In respect to how it should work, here is my example which first, collects the message (the message is shown for only 3 secs then disappears). Secondly, it gets the value using the @ sign. Lastly my code passes the stored message through to an empty function constructed to assert that the value Portsmouth is contained within the message.

it('Current Port change', () => {
  cy.get('#viewport').find('div[id=message]').then(message => {
    let wags = message;
    cy.wrap(wags).as('wags')
  });

  cy.get('@wags').then(wags => {
     expect(wags).to.contain("Portsmouth")
  });
});

let me know if you need further clarification

Finding the card with name 'cypress' and clicking the edit button

cy.contains('.MuiCardContent-root', 'cypress').within(() => {
  cy.get('svg.MuiSvgIcon-root').eq(0)  // 1st button is edit
    .click()
})

I just found another approach in a blog, adding it here for reference.

const uuid = () => Cypress._.random(0, 1e6)
const id = uuid()
const testname = `testname${id}`
cy.get('input').type(testname);

worked well for me :)

Your first attempt was correct. However, it appears that blacking out an SVG element is something Cypress doesn't currently support.

I tried your first approach and stepped through the Cypress code.

cy.screenshot({ blackout: ['svg'] });

• In addBlackout() (source), Cypress finds all SVG elements.
• In addBlackoutForElement() (source), Cypress calculates the dimensions for each SVG element.
• In getElementDimensions() (source), Cypress attempts to read offsetWidth/offsetHeight directly off the SVGElement.

These return undefined, as these properties are only valid for HTMLElement, not SVGElement. Cypress does some math and ends up drawing the blackout with NaN width and height.

Cypress would need to change getElementDimensions() to support SVG as well.

So something that really kinda sucks right now is react released v17 late last year, and it was pretty much 100% backwards compatible with 16. This means anybody on 16 could upgrade to 17 without any issues. However, there are still many packages out there that list react 16 as a peer dependency but not 17. Well npm v7 changed the way they handle peer dependencies in such a way that you are getting this error. Your best bet is to

1. Create an issue and submit a PR to the offending package react-inspector
2. In the mean time, use --force or --legacy-peer-deps as the error instructs.

EDIT: However, checking the react-inspector project, it looks as though they are listing v17 in their peer deps. Try deleting your package-lock.json and deleting your node_modules and do a fresh install.

You say "The problem is, when I return the value, the variable is undefined".

That's because the return myNumber line runs before the cy.get(this.labelWithText).then(($element) => { completes, because the command is running asynchronously.

You need to return the command itself, and also the derived myNumber is returned from inside the .then().

public getValueFromElement(): Chainable<string> {  // cannot return the raw string 
  cy.log("Obtaining the Value");
        
  return cy.get(this.labelWithText).then(($element) => {
    ...
    const myNumber = splittedText[1]; 
    cy.log("Inside the THEN " + myNumber)
    
    return myNumber
  })
}

Use it like this

getValueFromElement().then(myNumber => {
  cy.log("Outside the function " + myNumber)
})

Just check for response.body. See below example.

cy
  .request('POST', 'http://localhost:8888/users/admin', { name: 'Jane' })
  .then((response) => {
    // response.body is automatically serialized into JSON
    expect(response.body).to.have.property('name', 'Jane') // true
  })

Please see chaijs .a(type[, msg])

Asserts that the target’s type is equal to the given string type. Types are case insensitive.

expect(undefined).to.be.an('undefined')

The .a() or .an() is doing a typeof check that returns a string, so you just need to quote the "undefined" type

cy.wrap(user).should('not.be.a', "undefined")

or drop the .a to do a reference check instead

cy.wrap(user).should('not.be', undefined)

You can use tasks to execute node code. In your plugins.js create the task with the arguments you need, returning the calculated value:

  on('task', {
    // you can define and require this elsewhere
    getTicketBySummary('getTicketBySummary', { issues, summaryTitle }) {
      return issues.data.issues.filter(...);
    }
  })
}

In your test, execute the task via cy.task:

  it('returns an array containing a found ticket summary', () => {
    cy.task('getTicketBySummary', {
      issues: mockedTickets,
      summaryTitle: 'This is ticket number 1',
    }).then(result => {
      expect(result).eq(mockedTickets.data.issues[0]);
    })
  });

That being said, getTicketBySummary looks like a pure function that doesn't depend on fs. Perhaps separate helper functions that actually need node as that could avoid need cy.task. If you want to be able to import commonjs (require) via ES6 import/export you would usually need to setup build tools (babel/rollup/etc) to be able to resolve that effectively.

Hopefully that helps!