How to use TestHook method in Cypress

Regardless of whether or not your custom command returns a cypress chain, you can run code after the command wrapping it in a then callback:

describe('Summary Page', () => {
  it('my demo test', () => {
    console.log('before command runs')
    cy.testCommand()
    cy.then(() => {
      console.log('after command runs')
    })
  })
})

As for using async/await, Cypress by default does not support async/await, see this issue and the long discussion inside it.

To reduce the number of callback you may try either cypress-promise or cypress-thenify libraries. However, each of them has it's own limitations.

This answer provides most of the information needed (thanks CRayen for pointing me to another question (which was a duplicate of another)).

Basically you can put a .eslintrc file into any subfolder in which you want to override rules. Then you need to add a section like the one in the answer:

"overrides": [{
  "files": [ "*.spec.js" ],
  "rules": {
    "no-unused-expressions": 0
  }
}]

where you explicitly turn off the rules you don't want to be used to check the files listed by setting them to 0.

I might try this:

cy.get(".ibxudA").find('.WildnessText-kRKTej').should('have.text',"Wildness")

or

cy.get(".ibxudA").find('.WildnessText-kRKTej').invoke('text').then((text) => {
    expect(text.trim()).equal('Wildness')
});

This might be a similar question: How do you check the equality of the inner text of a element using cypress?

I think you are using the wrong quotes, you need to use backticks to use Template Literals:

cy.visit(`http://test.com/aaa/bbb?id=${idp}`)

You can then use cy.url() to get the current URL as a string and use JavaScript to parse the string as normal.

Overwriting commands can be a bit dodgy, the behavior when calling originalFn() is not always the same as when calling as a command, e.g cy.visit().

The failure is likely because the visit failed (i.e the call originalFn(url, authenticatedOptions) failed for some reason). But originalFn() returns a Promise, which should be rejected on failure but it isn't.

When you call a bad URL, say cy.visit('http://example-not-valid.com'), without the overwrite Cypress gives you a fairly decent message. With the overwrite it's just an unresolved promise.

You could use composition and add a new command

Cypress.Commands.add("visitWithAuthentication", (url, options) => {

  cy.fixture("accounts").then((account) => {
    const username = account.auth_username;
    const password = account.auth_password;

    const authenticatedOptions = {
      ...options,
      auth: { username, password },
      failOnStatusCode: false,
    };

    cy.visit(url, authenticatedOptions);
  });
});

This will give you the correct message, but may not be convenient when switching from DEV to QA environments.

Something might be wrong with the selector, since you set position: absolute and confirm it, yet the message still references position: fixed.

Assuming the selector is ok, you might be able to trigger the "show" effect with .realHover() from cypress-real-events.

It uses Chrome Devtools Protocol to automate the chrome devtools (only for chrome browser).

Both are utility commands from cypress package, can be performed in the same way (chained off of cy or off another command) and there is no timeout period. But the difference are:

• pause() will stop the test execution to inspect the web application, the DOM, the network, whereas debug() will stop only when the developer tools are open
• pause() does not provide any debug information, whereas debug() give the details in browser console tab
• Using pause() we can find 'next' button option in the test runner, which allow us to execute the code step by step, debug() doesn't have the feature.

You can achieve this by using cypress custom commands. Here is the doc - https://docs.cypress.io/api/cypress-api/custom-commands.html

You can create custom commands under cypress/support/commands.js

An example from the cypress doc of how a login function can look like:

Cypress.Commands.add('typeLogin', (user) => {
  cy.get('input[name=email]')
    .type(user.email)

  cy.get('input[name=password]')
    .type(user.password)
})

Now in the tests, you use the above custom command as:

cy.typeLogin({ email: 'fake@email.com', password: 'Secret1' })

By default, Cypress plugins file is run in the Node that's bundled alongside with Cypress's Electron app.

Youcan work around this in two ways:

1. Auto-compile files imported into the plugins file, by using @babel/register plugin. Remember, this workaround won't work for the plugins file itself.

   First, install it:

   npm install -D @babel/register @babel/plugin-proposal-object-rest-spread
   

   Then, on top of your plugins/index.js, do (babel@7):

   require("@babel/register")({
       plugins: [ "@babel/plugin-proposal-object-rest-spread" ]
   });
   

   https://babeljs.io/docs/en/next/babel-register.html

2. Run the plugins file using your system's Node executable.

   Cypress allows you to set nodeVersion configuration, which controls this behavior.

   E.g., set in cypress.json:

   {
       "nodeVersion": "system"
   }
   

   Note: this of course works only if your system's Node already supports that feature.