How to use showAll method in Cypress

I am facing a similar issue. I wonder if this may have resolve the problem:

6.2.1 6 months ago

"multipart/form-data is no longer wrongly encoded when using cy.intercept(). This should prevent Unexpected end of multipart data errors on the back end service where the request was pointing to. Fixes #9359."

https://openbase.com/js/cypress/versions

I was given the answer by someone in a gitter chatroom:

describe('My Login Test', function (){
it('Visit Risk App Landing Page', function (){
    cy.visit('https://bvt-riskassessment.lmkcloud.net')
    cy.get('button').click()
    cy.get('a.auth0-lock-alternative-link').contains('Not your account?').click()
    cy.fixture('loginUser').as('myUserFixture');
    cy.get('@myUserFixture').then(user => {
    cy.get('input.auth0-lock-input').first().type(user.email);
    cy.get('input.auth0-lock-input').last().type(user.password);
    cy.get('button').click()
    cy.url().should('eq','https://bvt-riskassessment.lmkcloud.net/workflow')

I can now login using this without having the username or password in every test scenario.

I think it would work with following setup:

At root level of your app, jest.config.js:

module.exports = {
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$",
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.mjs$": "babel-jest",
  },
  testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/"],
  moduleFileExtensions: ["js", "jsx", "mjs"]
}

And babel config babel.config.js:

const presets = [
  [
    "@babel/preset-env",
  ]
];

module.exports = { presets };

And finally your script to run the test in package.json:

"test": "jest --config=jest.config.js",

TLDR:

Try

loginSelector: '#supertokens-root::shadow button[data-supertokens^="providerButton"]'

Explanation

It looks a bit tricky because cypress-social-logins uses Puppeteer internally to implement the login code, so the Cypress includeShadowDom: true setting probably doesn't affect it.

According to this answer Puppeteer: clicking button in shadowroot, you can find the correct selector using devtools/inspect-element/copy-js-path.

If I do that on the SuperTokens demo, I get

document.querySelector("#supertokens-root").shadowRoot.querySelector("div > div > form > div:nth-child(2) > button")

which isn't super-useful as a selector, since it has a property call for shadowRoot, but there is a pseudo-element ::shadow that may work instead.

See The ::shadow pseudo-element

If an element has at least one shadow tree, the ::shadow pseudo-element matches the shadow root itself. It allows you to write selectors that style nodes internal to an element's shadow dom.

If ::shadow works to move inside the shadow-root, just append a standard Cypress selector that identifies the button uniquely.

Your code seems to run ok on the ng-file-upload demo page.

I also tested with an 'xlsx' file, no problem found.

describe('Angular file upload Demo', () => {

  /*
    To run these tests, add a file 'logo.png' to /cypress/fixtures
  */

  it('uploads the fixture file', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').then(subject => {
      return cy.fixture('logo.png', 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
          console.log('blob', blob)
          const el = subject[0]
          if (el != null) {
            const testFile = new File([blob], 'logo.png')
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
          }
          return subject          
        })
    })

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

  Cypress.Commands.add('uploadFile', { prevSubject: 'element' }, (subject, fileName) => {
    console.log('subject', subject)
    return cy.fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        console.log('blob', blob)
        const el = subject[0]
        if (el != null) {
          const testFile = new File([blob], fileName)
          const dataTransfer = new DataTransfer()
          dataTransfer.items.add(testFile)
          el.files = dataTransfer.files
        }
        return subject          
      })
    }
  )

  it('uploads the file via custom command', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').uploadFile('logo.png')

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

})

One common way to e2e test application with external dependencies like stripe is to make a simple mock version of it, that is then applied in e2e testing. The mock can also be applied during development, to speed things up.

you can use contain keyword to look string that contain a substring

with should to perform directly the assertion

cy.get('[data-id="error"]').should('contain', 'is missing')

or get only element that contain text with contains

cy.get('[data-id="error"]').contains('is missing')

them perform needed assertion on it

Considering response.body is an array, you can use a forEach loop to iterate through them:

responde.body.forEach(res => {
  expect(res.requestId).not.eq(value)
})

From cypress documentation here:

Any environment variable on your machine that starts with either CYPRESS_ or cypress_ will automatically be added and made available to you.

Conflicting values will override values from cypress.json and cypress.env.json files.

Cypress will strip off the CYPRESS_ when adding your environment variables.

Exporting cypress env variables from the command line:

export CYPRESS_HOST=laura.dev.local

export cypress_api_server=http://localhost:8888/api/v1/

If you're using Windows you can set env variables using set or setx commands.

And in your test files you can call this:

Cypress.env()             // {HOST: "laura.dev.local", api_server: "http://localhost:8888/api/v1"}
Cypress.env("HOST")       // "laura.dev.local"
Cypress.env("api_server") // "http://localhost:8888/api/v1/"