Nightwatch is a powerful testing automation framework for testing web and native mobile applications. When combined with MailSlurp disposable test email accounts we can test real user authentication flows involving email verification and magic links.

In this example we will show you how to get started with Nightwatch and write tests for a demo application that permits user sign up and login with password-less email login powered by Firebase.

## Get setup

Create a new NodeJS project and run the following:

```
npm init nightwatch
npm install chromedriver --save-dev
npm install geckodriver --save-dev
```

Follow the prompts to configure end-to-end testing using a browser of your choice.

Next to create disposable temp email accounts we will use MailSlurp:

```
npm install mailslurp-client --save-dev
```

Make sure you get a free [API KEY](https://app.mailslurp.com) for the next steps.

## Enabling email login links in Firebase

Firebase authentication supports password-less email login providers. We will use a demo application that shows a login screen and allows users to access the site via password-less mail sign up. In this process the user enters their email address then Firebase emails them a link. When the link is clicked the user is taken to a logged-in session on the demo app. This authentication flow is quite typical for modern apps and can be tricky to test.

## Testing email flows with Nightwatch

Luckily we can use Nightwatch and MailSlurp to write an automated end-to-end browser test for this scenario to test that user login and sign-up really works with our app.

![](/assets/firebase-email-link-test.png)

### Configure the tests

Create a new test file such as:

```typescript
export default (test = {
  "Email login link test": () => {
    // tests here
  },
});
```

Add to it imports for Nightwatch and MailSlurp:

```typescript
import { NightwatchAPI, NightwatchTests } from "nightwatch";
import MailSlurp from "mailslurp-client";
```

Next configure the MailSlurp client using your [API KEY](https://app.mailslurp.com):



```typescript
// create mailslurp client for controlling emails
const mailslurp = new MailSlurp({ apiKey });
let inbox = null;
let loginLink = null;
```



### Load the site

The first step is to load the demo application. You can find the app [on github](https://github.com/mailslurp/examples/tree/master/firebase-examples) or use the [hosted version](https://mailslurp-firebase-examples.firebaseapp.com).



```typescript
browser
  .url(appUrl)
  .waitForElementVisible("body")
  .assert.titleContains("MailSlurp")
  // go to the sign in page
  .waitForElementVisible("#page-email-link")
  .click("#page-email-link")
  // assert we are no signed in
  .waitForElementVisible("#quickstart-sign-in-status")
  .assert.containsText("#quickstart-sign-in-status", "Signed out")
  .screenshot("./screenshots/firebase-email-link-01.png", () => {
    done();
  });
```



### Create a temporary email address

Now we can create a throwaway email account using MailSlurp's createInbox method:



```typescript
// create a temp email account
inbox = await mailslurp.createInbox();
// fill the email form and submit
browser
  .setValue("#email", inbox.emailAddress)
  .click("#quickstart-sign-in", () => {
    done();
  });
```



We use that to fill the email form and submit the login request.

### Capture and read the email

Once submitted we expect Firebase to send a login link to our temporary email address. We can use MailSlurp's waitFor methods to wait until the email has arrived and return its content:



```typescript
// now wait for email
const waitTimeMillis = 120_000;
const email = await mailslurp.waitForLatestEmail(
  inbox.id,
  waitTimeMillis,
);
```



Let us check the content and expect a link:



```typescript
browser.assert.equal(
  email.body.indexOf("click this link") > -1,
  true,
  "Expect email body contains a link",
);
```



### Extract login link

We can use MailSlurp's built in link parser to find the embedded login link.



```typescript
// extract the links using MailSlurp
const links = await mailslurp.emailController.getEmailLinks({
  emailId: email.id,
});
browser.assert.equal(
  links.links.length,
  1,
  "Expect to find 1 link in the email",
);
loginLink = links.links[0];
```



### Load the link in browser to confirm user

Now that we have received an email using our disposable mailbox we can load the link in the browser to simulate a user clicking it.
This loads the signed-in session page on our demo app and proves our authentication flow is working as expected!



```typescript
browser.assert.equal(
  loginLink.indexOf("firebaseapp.com/__/auth/") > -1,
  true,
  "Expect link is well formed firebase email login link",
);
// now load the link in the browser
// equivalent to clicking the link inside the email
browser.url(loginLink, () => {
  done();
});
```



## Conclusion

As you can see, testing email login processes is a great way to ensure that your application is functioning correctly. If you want to know that your site is really working then test with real email addresses and browsers. Nightwatch and MailSlurp are both free tools that enable you to test email processes at scale using automation.
