How to use createFindPackageJsonIterator method in Cypress

You test the print popup with Cypress like so:

it('Print button renders & opens modal', () => {
  // Clicks & asserts the button that triggers the popup window to print
  cy.get('[data-test="button-print"]')
    .should('exist')
    .and('be.visible')
    .click();

  // Assert printing was called once
  cy.visit('/inner.html', {
    onBeforeLoad: win => {
      cy.stub(win, 'print');
    },
  });

  cy.window().then(win => {
    win.print();
    expect(win.print).to.be.calledOnce;

    // this line closes the print popup
    cy.document().type({ esc });
  });
});

This will not work because of the asynchronous nature of Cypress. Cypress themselves advises to use aliases to save values for later use.

https://docs.cypress.io/guides/core-concepts/variables-and-aliases

In you example you can put the value of cy.url() in an alias. Which you can get via cy.get('@aliasName') later:

Example:

    cy.url().as("schoolDistrictViewLink1");

    // do other things

    // when you need to use the value
    cy.get("@schoolDistrictViewLink1").then((url) => {
      cy.log(url);
    });

You can specify which .collapse you want by the content of it's children

cy.contains('.collapse', 'Apple')  // gets the 1st collapse element where child has "Apple" text
  .find('item').eq(1)             // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

If your actual HTML is more complicated and you want to start with the title element,

cy.contains('.title', 'Apple')  // get the title child with "Apple" text
  .parent()                    // move up to div.collapse
  .find('item').eq(1)         // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

or siblings navigation

cy.contains('.title', 'Apple')  // get the tile child with "Apple" text
  .siblings('item').eq(1)       // 2nd item sibling
  .should('have.text', 'Apple 2')

You can create a folder called page-objects inside your integration folder. Inside that you can create one js file for each screen like login.js. Now inside that you can write your locators like:

class login {
    usernameInput() {
        return cy.get('[type=text]')
    }
    passwordInput() {
        return cy.get('[type=password]')
    }
    submitButton() {
        return cy.get('[type=submit]')
    }
}
export default login

Inside your tests you can use them as:

import login from '/page-objects/login.js'
const loginPage = new login();

describe('Test_spec_1', function() {
    it('Visits the site & verifies elements', function() {
        loginPage.usernameInput().should('be.visible')
        loginPage.passwordInput().should('be.visible')
        loginPage.submitButton().should('be.visible')
    })
})

Try inverting/reversing your logic.

Get the element with the text, and then its tr parent:

cy.contains('Example Text').parent('.tr');

I've tried setting them in a before() but that didn't work either.

The before block should work. Maybe the before block isn't setup properly? I'm able to get this to work using the following setup.

describe("Foo Fighter", function() {
    var foo;
    before(function () {
        foo = getRandomArbitrary(1,10,1);
    });

    it("Fighting foo 1", function () {
        cy.log(foo);
    });
    it("Fighting foo 2", function () {
        cy.log(foo);
    });
    it("Fighting foo 3", function () {
        cy.log(foo);
    });
});
function getRandomArbitrary(min, max, decimals) {
  return (Math.random() * (max - min) + min).toFixed(decimals);
}

Which produces the following result, the random number staying the same during each it block.

The logic flow goes:

• In the describe block, declare your variable.
• In the before block, set your variable using the random number.
• In the it block, use the set variable.

EDIT:

To answer your comment:

If I set it like you it works fine, but imagine if in the first it you visit google, and in the second it you visit github, the before block will run twice

The issue here is that when you visit a new site, Cypress reloads the entire test context, so a before block, like you mentioned, will be run again each time the test context is reloaded (i.e. each time a new domain is visited).

The way around this is to cheat by setting up another describe that runs first and writing your variables to fixtures and using those fixtures in your test, like so:

describe("Before Describe", function(){
    const foo = getRandomArbitrary(1,10,1);
    it("Setting up test context", function() {
        cy.writeFile("cypress/fixtures/test.json", { "foo" : foo});
    });
});



describe("Foo Fighter", function() {
    it("Fighting foo 1", function () {
        cy.visit("https://example.cypress.io");
        cy.fixture("test.json").then(kung => {
            cy.log(kung.foo);
        })
    });
    it("Fighting foo 2", function () {
        cy.visit("https://google.com")
        cy.fixture("test.json").then(kung => {
            cy.log(kung.foo);
        })
    });
    it("Fighting foo 3", function () {
        cy.fixture("test.json").then(kung => {
            cy.log(kung.foo);
        })
    });
});

function getRandomArbitrary(min, max, decimals) {
  return (Math.random() * (max - min) + min).toFixed(decimals);
}

This will produce the following results:

Admittedly, not the cleanest way to construct your testing flow, however, it produces the result you're after. Should also work if you put the setup in an it that comes first within the same describe as the other tests.

The process you described can surely be tested with react-testing-library as an integrated test. From the docs/faq, it encourages testing a component high enough up the component tree, without mocking child components, in order to simulate and test what an actual user interaction would be like.

Also check out this Kent C. Dodds blog post .

should('have.text', text) should work

cy.get('td').eq(1).should('have.text', 'hello')

If there's whitespace around text, use contain.text

cy.get('td').eq(1).should('contain.text', 'hello')

Use regular expression to validate a ten-digit number

See the script down below:

1.For 10 digit number:

cy.get('#<class-name-of-text-input>').contains(/^\d{10}$/)

2.For 10 digit number containing all 0-9 digits

cy.get('#<class-name-of-text-input>').contains(/^(?!.*(.).*\1)\d{10}$/)

Check Regexr to validate the expression.