cypress-firebase | Cypress plugin and custom commands | Authentication library

Note: These instructions assume your tests are in the cypress folder (cypress' default). See the folders section below for more info about other supported folders.
Install cypress-firebase and firebase-admin both: yarn add -D cypress-firebase firebase-admin@9 or npm i --save-dev cypress-firebase firebase-admin@9 (NOTE: firebase-admin v10 modules is not yet supported, but is in the works)
Go to project setting on firebase console and generate new private key. See how to do so in the Google Docs.
Add serviceAccount.json to your .gitignore (THIS IS VERY IMPORTANT TO KEEPING YOUR INFORMATION SECURE!)
Save the downloaded file as serviceAccount.json in the root of your project (make sure that it is .gitignored) - needed for firebase-admin to have read/write access to your DB from within your tests
Add the following your custom commands file (cypress/support/commands.js): import firebase from "firebase/app"; import "firebase/auth"; import "firebase/database"; import "firebase/firestore"; import { attachCustomCommands } from "cypress-firebase"; const fbConfig = { // Your config from Firebase Console }; firebase.initializeApp(fbConfig); attachCustomCommands({ Cypress, cy, firebase }); With Firebase Web SDK version 9 import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/database"; import "firebase/compat/firestore"; import { attachCustomCommands } from "cypress-firebase"; const fbConfig = { // Your config from Firebase Console }; firebase.initializeApp(fbConfig); attachCustomCommands({ Cypress, cy, firebase });
Make sure that you load the custom commands file in an cypress/support/index.js like so: import "./commands"; NOTE: This is a pattern which is setup by default by Cypress, so this file may already exist
Setup plugin adding following your plugins file (cypress/plugins/index.js): const admin = require("firebase-admin"); const cypressFirebasePlugin = require("cypress-firebase").plugin; module.exports = (on, config) => { const extendedConfig = cypressFirebasePlugin(on, config, admin); // Add other plugins/tasks such as code coverage here return extendedConfig; }; With Typescript import admin from "firebase-admin"; import { plugin as cypressFirebasePlugin } from "cypress-firebase"; module.exports = ( on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions ) => { const extendedConfig = cypressFirebasePlugin(on, config, admin); return extendedConfig; };
To confirm things are working, create a new test file (cypress/integration/examples/test_hello_world.js) adding a test that uses the cypress-firebase custom command (cy.callFirestore): describe("Some Test", () => { it("Adds document to test_hello_world collection of Firestore", () => { cy.callFirestore("add", "test_hello_world", { some: "value" }); }); });
From the root of your project, start Cypress with the command $(npm bin)/cypress open. In the Cypress window, click your new test (test_hello_world.js) to run it.
Look in your Firestore instance and see the test_hello_world collection to confirm that a document was added.
Pat yourself on the back, you are all setup to access Firebase/Firestore from within your tests!
Go to Authentication page of the Firebase Console and select an existing user to use as the testing account or create a new user. This will be the account which you use to login while running tests.
Get the UID of the account you have selected, we will call this UID TEST_UID
Set the UID of the user you created earlier to the Cypress environment. You can do this using a number of methods: Adding CYPRESS_TEST_UID to a .env file which is gitignored Adding TEST_UID to cypress.env.json (make sure you place this within your .gitignore) Adding as part of your npm script to run tests with a tool such as cross-env here: "test": "cross-env CYPRESS_TEST_UID=your-uid cypress open"
Call cy.login() with the before or beforeEach sections of your tests