How to use augmentWidthOrHeight method in Cypress

To test the individual texts in the array of elements returned by .getMyCoolType(),

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .each(($item, $index) => {
        cy.wrap($item)
          .invoke('text')
          .then((text) => {
            cy.log($index.toString());
            cy.log(text);
            if ($index !== 0) {
              expect(text.trim()).to.equal('Yoga');
            }
          });
      })
  });
});

Or to test all items after the loop

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .each(($item, $index) => {
        cy.wrap($item)
          .invoke('text')
          .then((text) => {
            if ($index !== 0) values.push(text);
            cy.log($index.toString());
            cy.log(text);
          });
      })
      .then(() => expect(values.every(item => item === 'Yoga')).to.equal(true) );
  });
});

You might also get away with this

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .then(($items) => {
        const texts = [...$items].map(item => item.text()); // map elements into texts
        return texts.slice(1);                              // ignoring the first one
      })
      .then((items) => expect(items.every(item => item === 'Yoga')).to.equal(true) );
  });
});

There are two major differences.

First, the two functions handle filepaths differently.

cy.readFile() starts at your cypress project folder, the folder where your cypress.json is. In other words, cy.readFile("test.txt") will read from (path-to-project)\test.txt.

cy.fixture() starts in the fixtures folder. cy.fixture("test.txt") will read from (path-to-project)\cypress\fixtures\test.txt. Note that this may be different if you have set a fixtures path in your cypress.json.

Absolute file paths do not appear to be supported here.

Second, cy.fixture() tries to guess the file's encoding.

cy.fixture() assumes the encoding for certain file extensions while cy.readFile() does not, except in at least one special case (see below).

For example, cy.readFile('somefile.png') will interpret it as a text document and just blindly read it into a string. This produces garbage output when printed to console. However, cy.fixture('somefile.png') will instead read in the PNG file and convert it to a base64-encoded string.

This difference isn't in the ability of the two functions, but instead appears to be in default behavior; if you specify the encoding, both functions act identically:

cy.readFile('path/to/test.png', 'base64').then(text => {
    console.log(text); // Outputs a base64 string to the console
});

cy.fixture('path/to/test.png', 'base64').then(text => {
    console.log(text); // Outputs the same base64 string to the console
});

Note:

cy.readFile() doesn't always read in plain text. cy.readFile() gives back a Javascript object when reading JSON files:

cy.readFile('test.json').then(obj => {
    // prints an object to console
    console.log(obj);
});

In Puppeteer you have the option to talk to DevTools and throttling the page with CDPSession class, consider the following example:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  // Create a new tab
  const page = await browser.newPage()

  // Connect to Chrome DevTools
  const client = await page.target().createCDPSession()

  // Set throttling property
  await client.send('Network.emulateNetworkConditions', {
    'offline': true,
    'downloadThroughput': 200 * 1024 / 8,
    'uploadThroughput': 200 * 1024 / 8,
    'latency': 20
  })

  // Navigate and take a screenshot
  await page.goto('https://sometest.windows.net/home')
  await page.screenshot({path: 'screenshot.png'})
  await browser.close()
})

I stuck with similar issue using cy.scrollTo() on an Angular app with a lot of animation. Cypress proceeds to next commands before the scrolling is finished. I tried many combinations and found adding following options/values worked. These options can be used in scrollIntoView() too:

• easing (the easing animation): linear
• duration (Scrolls over the duration (in ms)): 100

The actual code looklikes this

cy.scrollTo('bottom', { easing: 'linear',duration: 100 }).then(() => { 
    // commands need to be executed after the scrolling is finished
});

The solution is here: https://github.com/cypress-io/cypress/issues/7402 You have to upgrade cypress to version 4.6.0 and add

{
    "experimentalSourceRewriting": true
}

to cypress.json

You will need to add a wait to your code, since cy.intercept() is just a declarative event listener. Adding a wait for it's alias ensures that it has been triggered.

Also, since the code is async you will probably need to wrap and alias request to use it in other parts. Using the raw request variable might give you the empty value, depending on context.

Ideally you would do this in a beforeEach() I think. You probably also need to add the trigger for the POST call - is is a cy.visit()?

let request;

cy.intercept("POST", "**/url/**", ( req => {
  request = {...req.body};
  req.reply({
    body: response
  })
})).as('myIntercept')

// Must cy.wait (not cy.get) the first occurrence
cy.wait('@myIntercept') 

cy.wrap(request).as('myRequest')

// use the "request" variable
cy.get('@myRequest').then(request => {...    

or take request from the wait result

cy.intercept("POST", "**/url/**").as('myIntercept')

// Must cy.wait (not cy.get) the first occurrence
cy.wait('@myIntercept').its('request')
  .then(request => {
    ...
  })

// 2nd time use get()
cy.get('@myIntercept').its('request')
  .then(request => {
    ...
  })

You have to use both cy.readFile() and cy.writeFile() to achieve this. You can write something like:

cy.readFile("cypress/fixtures/dataFile.json", (err, data) => {
    if (err) {
        return console.error(err);
    };
}).then((data) => {
    data.table[0].number = 3
    data.table[1].number = 4
    cy.writeFile("cypress/fixtures/dataFile.json", JSON.stringify(data))
})

You can check this blog out, it discusses in detail how to update an alias - https://ronvalstar.nl/updating-a-cypress-alias.

An easier way would be to wrap the value and create a new alias.

priceElements.priceButton().first().invoke("text").as("priceValue")

cy.get("@priceValue").then((priceValue) => {
  expect(priceValue).contains("/")
  cy.wrap(math.fraction(priceValue)).as("newPriceValue")
})

cy.get("@newPriceValue").then((newPriceValue) => {
  cy.log(newPriceValue)
})

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.