How to use this.postProcessRecording method in Cypress

I got exactly same problem and after hours of research I found a workaround that solves this. It is not a real fix but it solves your issue and mine. Here are the steps I did:

Create a 4th spec file, call it main.spec.ts, inside this file do an import for the 3 spec files you have:

import './fillform.spec.js'
import './uploadphoto.spec.js'
import './result.spec.js'

In cypress.json file, add the following entry to allow to run only the main spec file:

"testFiles": ["main.spec.js"],

Now cypress run will work exactly as cypress open and all specs will run without closing the browser in between:

npx cypress run --headed --browser chrome

I think strategies #1 & #2 rely on the browser remembering credentials and supplying them to the login page, as happens with the Stackoverflow page - you don't have to log in every time you visit.

The main difference is you have used cy.visit() instead of cy.request() as shown in the recipes.

If you still are not able to successfully grab the token, try using your login with cy.session(). It will only call the login function once per session.

/*
  Enable use of cy.session() and new behavior to handle caching 
  and restoring cookies, localStorage, and sessionStorage.
*/
Cypress.config('experimentalSessionSupport', true)

describe('...', () => {

  beforeEach(() => {
    cy.session(() => {
      login.loginCredentials(Cypress.env('userEmail'), Cypress.env('userPass')) 
    })
  })

  it('try to get csrf token', () => {
    cy.getCookie('YII_CSRF_TOKEN')
      .then((c) => {
        cy.log(c.value)
      })
  })
})

.its() is just a shorthand for property extraction. Since it fails with the period, you could instead use bracket notation in a .then().

cy.wrap(paramObj)
  .then(paramObj => paramObj['timeline.ws'])

or just

cy.wrap(paramObj['timeline.ws'])

Playing around with the URL constructor

const urlString = 'http://example.com?timeline.ws=3600000&timeline.to&timeline.fm&timeline.ar=false'
const url = new URL(urlString)

cy.wrap(url.searchParams.get('timeline.ws'))
  .should('eq', '3600000')

cy.wrap(url.searchParams.get('timeline.to'))
  .should('be.empty')

cy.wrap(url.searchParams.get('timeline.ar'))
  .should('eq', 'false')

Since you are selecting the input with force: true (meaning that the actual input element is hidden from view), one possibility is that perhaps the input that is being referred doesn't have the requirements in place for the selectFile to succeed. Perhaps in Firefox the input type is inferred from context while in Chrome it would need to be explicitly set.

Have you checked that the element #new-project-photo passed to selectFile satisfies this requirement specifically (from the Cypress docs linked above)?

a single input element with type="file", or a label element attached to one

If you could post the element and its context that could help further recreate this scenario and allow testing. Right now from the information available it's not possible to recreate this problem reliably.

I'm not sure there are any file-read or file-exists commands that can take a regular expression.

You can read the C:\Users\UserName\Downloads folder before and after the download, and take the diff.

cypress.json

{
  "downloadsFolder": "C:\Users\UserName\Downloads"
}

plugins

const fs = require('fs')

module.exports = (on, config) => {
  on('task', {
    filesInDownload (folderName) {
      return fs.readdirSync(folderName)
    }
  })
  return config
}

Test

const downloadsFolder = Cypress.config('downloadsFolder')

cy.task('filesInDownload', downloadsFolder).then(files1 => {

  // download

  cy.task('filesInDownload', downloadsFolder).then(files2 => {
    let difference = files2.filter(x => !files1.includes(x));
    expect(difference.length).to.be.gt(0)
  })
})

I would not use .each(), only one will pass but any other will fail.

Use .contains() if your text is specific enough (not in multiple options)

cy.contains('[id="names"] option', 'Have This Name')  // fails only if 
                                                      // no option has the text

If you have to match exactly, filter the options

cy.get('[id="names"] option')
  .filter((idx, el) => el.innerText === 'Have This Name')  // fails if filter 
                                                           // returns 0 items

If you want .each() for another reason, this will do

let found;
cy.get('[id="names"] option')
  .each(($option) => {
    if ($option.text() === 'Have This Name') {
      found = $option
      return false // return now, have found it
    }
  })
  .then(() => {    // after loop exit
    expect(found).to.have.text('Have This Name')
  })

Cypress clears all cookies before each test

Cypress.Cookies.defaults({
  preserve: "adminhtml"
})

see: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-preserve-cookies-localStorage-in-between-my-tests

fyi: adminhtml cookie stores admin's session id

EDIT

It appears that in magento 2 admin session id is stored in a cookie named "admin"

Cypress.Cookies.defaults({
  preserve: "admin"
})

Your question is a bit confusing, you say 5 test cases in single suite file but your example cypress run --spec 'cypress/integration/TestCase2.js implies individual spec files.

I'll give you an answer both ways.

Individual spec files

Please see the third example docs - cypress run --spec which runs two tests, comma separated.

cypress run --spec "cypress/integration/TestCase2.spec.js,cypress/integration/TestCase5.spec.js"

Single suite file

Please see How to add test case grouping in Cypress which uses a beforeEach() to check test names passed in by ENV variable.

Add this at the top of your single test suite

beforeEach(function() {

  const testFilter = Cypress.env('TEST_FILTER');
  if (!testFilter) return;                       // exit if no filter defined

  const testName = Cypress.mocha.getRunner().test.fullTitle();
  if (!testFilter.includes(testName)) {
    this.skip();
  }
})

Run with

set CYPRESS_TEST_FILTER=Test2;Test5 & cypress open

or

cypress open --env TEST_FILTER=Test2;Test5  

Note when using the --env flag, the test names must not be separated by a comma since Cypress uses that internally to delimit multiple ENV variables.

This has been asked a few times, and the short answer is to use jQuery, e.g

cy.visit(...)
cy.wait(1000)  // in case the page is initially slow to load

const text = Cypress.$('div').text();
if (text.trim().startsWith('Processing') {
  cy.wait(1000)
  cy.reload()
}

That gets you one reload, but I guess you want to repeat that until 'Success...', for which recursion seems to be the only way to repeat stuff until the right DOM appears.

function waitForText(attempt = 0) {

  if (attempt > 100) {   // choose cutoff point, must have this limiter
    throw 'Failed'
  }

  cy.wait(1000);
  const text = Cypress.$('div').text();
  if (text.trim().startsWith('Processing') {
    cy.reload();
    waitForText(attempt + 1) 
  }
}

cy.visit(...)
waitForText()