How to use rewriteJsAsync method in Cypress

.find() is used for single search of an element, but only limits your actions to that element

.within() lets you to change the scope of searching the sub elements and call them directly with cy.get('subelementSelector'), and also work with them. The down side is, you can`t call elements from outside the scope of the parent element.

The third way is then. cy.get('elementSelector').then(element=>{//some code}) - this allows you to pass the element to a function for usage. You can search sub elements within with cy.get(element).find('subelementSelector'). Also you can use the usual commands for elements located outside the parent element scope. This has longer sintax, but greater scope.

Edit: To clarify .find() - allows a single usage of an element .within(passedFunction()=>{}) - changes the scope for DOM elements of the passedFunction to just child elements .then(element=>{}) - doesn't change the scope, but creates a JQ variable of the variable, that is available to use in the then function cy.get('parentSelector childSelector') - is the css way of getting the same result as .find()

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})

To do this I'm using wrap() to return a Chainable containing the value I want to return.

Module

function foo() {
  return cy.wrap('foo');
}

Cypress.Commands.add('foo', foo);

Test File

cy.foo().then(value => console.log(value)); // foo

Since wrap() is returning a Cypress.Chainable, we can call .then() on our commands. What ever is passed into wrap() is yielded to the next command.

See also: Cypress wrap() documentation

Posting this for people who might run into the same problem in the future.

You can solve this problem by adding "all_frames": true inside content_scripts in the extension manifest.json. This allows the extension to be injected into all frames instead of just the top most frame of a tab

Here's a link for more information on all_frames

You can also add this only when you run cypress by modifying manifest.json before loading the extension into cypress test runner

-Read the manifest from the extension build folder

-Modify content_scripts to include "all_frames": 'true'

-Save the updated version of manifest

You can have Cypress retry the expectation by changing .then() to .should().

I would also change the order you obtain the elements, since .should() retries the preceding command only.

it('should center the spider by left border', () => {
  cy.get('.wall').then(($wall) => {
    cy.get('.spider')
      .should(($spider) => { // repeat .get(spider) until except succeeds, or times out
        ...
        expect(spiderLeft).to.equal(spiderLeftAbs);
      });
  });
});

Also works with triggerable transitions, I tested with a hover transition (using cypress-real-events).

<style type="text/css">
  .target {
    font-size: 14px;
    transition: font-size 1s 1s;
  }
  .target:hover {
    font-size: 36px;
  }
</style>

BTW you may need to use some +/- on the pixels.

It happens if during the click event the app removes the input and appends a new one at the end. Then your alias is invalid, because it points to an element no longer in the DOM.

If I move the element within the click handler, your code works.

If I clone the element within the click handler, your code fails.

What to do?

Refresh your alias after the click()

cy.get('input:checkbox').first().as('myCheckbox').then(() => {

  cy.get('@myCheckbox').should('be.checked').click()
    .then(() => cy.get('input:checkbox').last().as('myCheckbox'))  // it's last now!

  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')

  cy.get('@myCheckbox').should('not.be.checked').click()
    .then(() => cy.get('input:checkbox').last().as('myCheckbox'))

  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')

  cy.get('@myCheckbox').should('be.checked')
})

The alias command has another trick as well.

If the element is cloned and replaced, the original element becomes detached from DOM.

The cy.get('@alias') detects detached elements and replays the original command to automatically refresh.

It doesn't work with .first() because the element changes position.

But if you use a data-cy attribute instead of .first(), your code will work.

cy.get('input:checkbox[data-cy="first-checkbox"]')
  .as('myCheckbox').then(() => {

  cy.get('@myCheckbox')
    .should('be.checked').click()    // cloned and moved to another position

  ...

  cy.get('@myCheckbox')                 // detached by previous click
    .should('not.be.checked').click()   // so alias replays original get
                                        // with [data-cy="first-checkbox"]
  ...
  cy.get('@myCheckbox').should('be.checked')  // as above
})

Here's the Cypress code that does it

let { subject, alias, command } = aliasObj

const resolveAlias = () => {
  
  if ($dom.isElement(subject)) {          // if this is a DOM element

    const replay = () => {
      cy.replayCommandsFrom(command)
      return undefined
    }

    if ($dom.isDetached(subject)) {     // is it detached?

      subject = subject.filter((index, el) => $dom.isAttached(el))  // all detached?

      if (!subject.length) {
        return replay()                // perform the replay
      }
    }

If you don't want to use clipboardy package you can also use this:

cy.window().then((win) => {
    win.navigator.clipboard.readText().then((text) => {
      expect(text).to.eq('your copied text');
    });
  });

in your case, it turns to something like

   cy.get('td').find('div').find('span').find('button').find('i').eq(0).click().then(()=>{
    cy.window().then((win) => {
      win.navigator.clipboard.readText().then((text) => {
        console.log("Helloooo:"+text);
      });
    });
   })

cy.wait is not a good practice in most situations because it just hangs your program to wait till the end of the timeout.

I think you're looking for a solution to wait for an element appears in HTML, so I'd suggest you to check this part of the document

In your case, it should be like below

cy.get('.selector', { timeout: 120000 }).should('be.visible')

Even though the timeout is longer but whenever your .selector appears on the HTML, it will pass.

Note that, the default timeout is only 4 seconds, so if you want to have more timeout, you can modify it to longer (like 2 mins for your case).

Why do we need to have timeout? Well, basically, we don't want the program hangs forever, so that's why we need to have timeout.

Not sure what you tried. I found the test was flaky depending on how the iframe was set up.

Mostly it failed to find the iframe's contentDocument, but turning off chromeWebSecurity seems to give consistent results.

cypress.json

{
  "chromeWebSecurity": false,
  "includeShadowDom": true
}

Test

cy.get('mati-frame')
  .find('iframe')
  .its('0.contentDocument.body')
  .find('button')                // passes