How to use preparePackageForNpmRelease method in Cypress

To expand on @JosePita's idea, you can set up glob patterns in scripts (package.json) and by-pass the multitude config files he was concerned about.

For example, these work on my system,

"scripts": {
  "cy:open": "cypress open",                              // all files
  "cy:user": "cypress open -c testFiles=user/**/*",       // just the user folder
  "cy:error": "cypress open -c testFiles=**/*error*.js",  // files with keyword 'error'

There's a search bar at the top of the Cypress runner, where the tests are listed, but search is all it does.

Pressing the Run all specs button runs the full set regardless of search results.

If you want to run a subset, specify the testFiles config option on the command line.

From your description the only step missing is the support file import.

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

I also have a .babelrc with the following, but I believe you can do without it if just covering e2e tests.

{
  "plugins": ["istanbul"]
}

Let me know if that's not it, I will give you step-by-step.

Yes, it looks like there is a good attempt to create a scenario recorder and it works to a great extent:

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb/related?hl=en

It looks like you want to make a child command.

Whatever precedes your custom command is passed in as subject (equivalent to locator)

Cypress.Commands.add("commandName", {prevSubject: true}, 
  (subject, chartValue1) => {
    const chartValues = [150, 250, 350, 450, 550, 750, 900];
    for (const value of chartValues) {
      subject.click(value, chartValue1).then(() => {
        mainElementsPage.mainSideBarHeader()
          .should("not.include.text", "(pon.)")
          .should("not.include.text", "(wt.)")
          .should("not.include.text", "(śr.)");
      });
    }
  }
)


cy.get("#chart-grid-rect").commandName(200);

// or

mainElementsPage.chartRect().commandName(200);

class MainElementsPage {

  chartRect() {
    return cy.get("#chart-grid-rect");
  }
}

export default new MainElementsPage;   // note - new keyword here

You can directly check that the innerText has the new line character \n.

cy.get('selector').then(($ele) => {
  expect($ele).to.contain('\n')
})

In case your inner text doesn't have the newline characters, you assert the style tag containing overflow-wrap: break-word

cy.get('selector').should('have.attr', 'style').and('include', 'overflow-wrap: break-word')

You can do what you want with the help of some npm scripts, to save you repeatedly typing tedious commands.

In your package.json do something like this:

"scripts": {
    "cypress:open": "cypress open",
    "cypress:open:feature-1": "cypress open --config integrationFolder=tests/cypress/integration/feature-1",
    "cypress:open:feature-2": "cypress open --config integrationFolder=tests/cypress/integration/feature-2"
}

npm run cypress:open will run tests in the integration folder

npm run cypress:open-feature-1 will run tests in the integration/feature-1 folder

You can put your seeding functions into cypress/support/index.js and add them to the global object, something like this:

global.school = () => {
  faker.seed(123) // Seeding faker means you get the same details every time
  return {
    _id: faker.random.number(),
    name: `${faker.address.city()} School`,
    slug: faker.lorem.word(),
    email: 'demo@ccc.me',
    password: 'password'
  }
}

In your test script you can invoke this function with a line like this:

const s = school() // Get a fresh object that looks like a school

I hope that helps

If you are using {force: true} then it doesn't matter if the element is visible or hidden, cypress will click it. So in my opinion you don't need the filter option.

cy.get(`[data-cy="${test}"]`).click({force: true})

Or, If you want to directly apply the OR condition in .filter you can do:

cy.get(`[data-cy="${test}"]`).filter(':visible,:hidden').click({force: true})

Or, If you want to use If-Else you can do something like this:

cy.get(`[data-cy="${test}"]`).then(($ele) => {
  if ($ele.filter(':visible')) {
    cy.wrap($ele).click()
  } else if ($ele.filter(':hidden')) {
    cy.wrap($ele).click({force: true})
  }
})

This issue has been resolved. Thanks to @Mr.J. This had nothing to do with fs-extra. The entry point in docker file was not correct and I had to modify that. After modifying that, it worked fine.

If at all you have this issue, 1. Try installing fs-extra inside node_module. 2. please check the path in the cypress config file. 3. Check the path in docker file.

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress