How to use loadTextFromFile method in Cypress

I've got Cypress tests running for several environments, one of those has issues with the login state. Deleting cookies helps sometimes, but not always. So to keep the tests stable I decided to create an if statement (what in itself isn't a best practice) to go to the known application state as fast as possible.

What I do is using the custom command below in every beforeEach() that could use a login:

Cypress.Commands.add('login', function () {
    cy.get('body').then($body => {
        if ($body.find('.user-profile-name').length === 1) {
            cy.log('Already logged in')
        } else {
            cy.get('.login-button').click()
        }
    })
})

What is does is checking if the browser is already logged in, since .user-profile-name should exist. If it does not exist the browser isn't logged in, so Cypress needs to click the .login-button button.

Seems you're importing app variable on the test directly. This object is a different one than the one on your browser. You should make a global variable (or method) for getting your app variable directly from your browser

cy.window().its('app').then((app) => { 
   // your test with app var
})

Also you might want to use then() condition to ensure it checks it after. But this may not be necessary.

.click({ force: true }).then(() => {
   expect(displayMovieInfo).to.be.called;
});

The basic problem is in getText(selector, variable) the 2nd param you want to give a value is passed in "by value", but to set and use later it would need to be passed "by reference".

If you "pass by value", setting the variable has no effect outside of the function.

See Pass variables by reference in JavaScript for some background.

It's not possible to pass "by reference" in javascript, but you can wrap in a container object and modify properties

function getText(selector, container, variableName) {
  selector.invoke('text')
    .then(($text) => {
      container[variableName] = $text.trim()
    })
}

it('the UI...', () => {

  const container = {       // Note const because container never changes
    listItem1: null,        // only properties will change
    listItem2: null
  }

  cy.get('someTab').click().then(() => {
    cy.getText(cy.get('someSelector').first(), container, 'listItem1')
    cy.getText(cy.get('someSelector').last(), container, 'listItem2')
  }).then(() => {
    cy.get('someSelector').first().click()
    cy.get('someSelector').last().click()
    cy.get('someButton').click()
  }).then(() => {
    cy.log(container.listItem1); // listItem1 is visible
    cy.log(container.listItem2); // listItem2 is visible
    cy.get('span[data-app]').should('contain', container.listItem1)  
    cy.get('span[data-app]').should('contain', container.listItem2) 
  })
})

You can change getText() to a custom command

const container = {}

Cypress.Commands.add('storeAs', { prevSubject: true }, function(subject, prop) {
  cy.wrap(subject)
    .invoke('text')
    .then(text => container[prop] = text)
})

it('the UI...', () => {

  cy.get('someTab').click().then(() => {
    cy.get("someSelector").first().storeAs('listItem1')
    cy.get("someSelector").last().storeAs('listItem2')
  }).then(() => {
    ...
  }).then(() => {
    cy.log(container.listItem1); // listItem1 is visible
    cy.log(container.listItem2); // listItem2 is visible
    cy.get('span[data-app]').should('contain', container.listItem1)  
    cy.get('span[data-app]').should('contain', container.listItem2) 
  })
})

Looks like you might have a stray comma in your fourth to last line

      });
      return response;
    },  <------------------ here
  });
  return config;
};

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

You can also use this Cypress plugin meanwhile Cypress does not support this feature natively: https://www.npmjs.com/package/cypress-fail-fast

Add the plugin to devDependencies:

npm i --save-dev cypress-fail-fast

Inside cypress/plugins/index.js:

module.exports = (on, config) => {
  require("cypress-fail-fast/plugin")(on, config);
  return config;
};

At the top of cypress/support/index.js:

import "cypress-fail-fast";

What you should know is that Cypress clears the state of browser every time it starts a new it(). So something what is done in the first it() is not now in the second it(). In your case, the login is in the first it, in the second it the application is not logged in anymore. To take care that Cypress stays logged in, you should move the login step to a before() or a beforeEach() (depends wether you want to login once per describe or per every it.

Following your post it seems you like it to login once and stay logged in, so the before() does the job for you. Your code would look like this:

describe('signing in', function() {
  before('Logijn to the application', function() {
    cy.visit('https://testing.safeandreliable.care/sign-in')
    cy.get('[id="at-field-username_and_email"]').type('bcramer@safeandreliablecare.com')
    cy.get('[id="at-field-password"]').type('******')
    cy.contains('Sign In').click()
  })
  it('signs into the default entity', function(){
    cy.get('[id="help-text-board"]').click({force:true})
    cy.wait(9000)
  })
  it('next test', function () {
    // do other test but still logged in
  })
})

Make sure that you return that promise inside Cypress.Commands.add callback. It's a bit confusing to deal with promises in Cypress context, since a lot of async behavior is magically handled within cy. commands.

Cypress.Commands.add("login", () => {
  return AuthLib.signIn(username, password).then((data) => {
    cy.setLocalStorage("accessToken", data.accessToken);
  });
});

Other solution:

Cypress.Commands.add("login", () => {
  return AuthLib.signIn(username, password);
});

before(() => {
  cy.login();
  cy.setLocalStorage("accessToken", data.accessToken);
});

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