cypress-firebase

cypress-firebase

Utilities and cli to help testing Firebase projects with Cypress

What?

• Custom commands for auth and database interactions:
  • cy.login
  • cy.logout
  • cy.callRtdb
  • cy.callFirestore
• simple test environment config generation (including custom auth token) - cypress-firebase createTestEnvFile

Usage

Pre-Setup

Note: Skip to #3 if you already have Cypress tests in your project

1. Install Cypress and add it to your package file: npm i --save-dev cypress
2. Add cypress folder by calling cypress open

Setup

1. Install deps npm i cypress-firebase firebase-tools-extra cross-env --save-dev

2. Add the following to the scripts section of your package.json:

   "build:testConfig": "cypress-firebase createTestEnvFile",
   "test": "npm run build:testConfig && cross-env CYPRESS_baseUrl=http://localhost:3000 cypress run",
   "test:ui": "npm run build:testConfig && cross-env CYPRESS_baseUrl=http://localhost:3000 cypress open",
   

3. Add the following to the 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
   };
   
   window.fbInstance = firebase.initializeApp(fbConfig);
   
   attachCustomCommands({ Cypress, cy, firebase })
   

Test Built Version

Tests will run faster locally if you tests against the build version of your app instead of your dev version (with hot module reloading and other dev tools). You can do that by:

1. Adding the following npm script:

   "start:dist": "npm run build && firebase serve --only hosting -p 3000",
   

2. Call npm run start:dist to build your app and serve it with firebase

3. In another terminal window, run a test command such as npm run test:ui

Create Config

1. Log into your app for the first time

2. Go to the Auth tab of Firebase and get your UID

3. Generate a service account -> save it as serviceAccount.json

4. Add your config info to cypress/config.json

   {
     "TEST_UID": "<- uid of the user you want to test as ->",
     "FIREBASE_PROJECT_ID": "<- projectId of your project ->"
   }
   

Why?

It isn't currenlty possible to use Firebase's firebase-admin SDK directly within Cypress due to dependencies not being able to be loaded into the Browser environment. Since firebase-admin is nessesary to generate custom token needed to login to Firebase, the usage of it happens outside of Cypress (through cypress-firebase createTestEnvFile) before booting up.

Projects Using It

fireadmin.io - A Firebase project management tool (here is the source)

Roadmap

• Fix issue where auth token goes bad after test suite has been open a long time