
Using `data-testid` with Playwright makes it easy to select elements for testing. This is ideal when UI components change frequently but need consistent functionality. By using a unique `data-testid` for each element, tests are simpler to maintain and more stable, as these identifiers allow direct access to components, regardless of visual changes.

## Why not just use id or classes?

```jsx
// Using data-testid
function LoginButton() {
  return <button data-testid="login-button">Log In</button>;
}

// Using id
function LoginButton() {
  return <button id="login-button">Log In</button>;
}
```

While all of these are attributes on an element, there are some real benefits to using data-testid for automation:

- `data-testid` indicates its use for testing, which helps it stand out from other attributes like id or class that might be used for styling or scripting
- Since `data-testid` is solely for testing, your tests remain unaffected by changes to styles or scripts that use id or class for other purposes
- `data-testid` can be safely removed in production. This keeps the production code clean and optimized, while also preventing easy scraping

Another benefit is the improved readability. With `data-testid`, you can use descriptive names that reflect the element's role. This can be added to more elements since it doesn't affect styles.

## Playwright Locators

With Playwright you use locators to find elements on the page. For the full list check out [Locators](https://playwright.dev/docs/locators) in the docs.

The one we're interested in is `getByTestId`

```jsx
function LoginButton() {
  return <button data-testid="login-button">Log In</button>;
}
```

```ts
await page.getByTestId("login-button").click();
```

### Configuring the testid attribute

You may already use something other than `data-testid`. Playwright allows configuration of this in `playwright.config.ts`

```js
import { defineConfig } from "@playwright/test";

export default defineConfig({
  use: {
    testIdAttribute: "data-totallyatestid",
  },
});
```

This will then get picked up instead when calling `getByTestId`.

## Example

Let's take a look at a practical example.

Suppose we had this test that relies on id selectors:

```js
test("Should reset password", async ({ page }) => {
  await page.goto("http://localhost:3000/forgot");
  await page.locator("#email").fill(testEmailAddress);
  await page.locator("form").click();
  // this will send an email with a reset link to the provided email address

  // Example email checking code (would depend on your email testing setup)
  const emails = await mailisk.searchInbox({
    to_addr_prefix: testEmailAddress,
    subject_includes: "reset",
  });

  const email = emails[0];
  const resetLink = email.text.match(/.*\[(http:\/\/localhost:3000\/.*)\].*/)[1];
  expect(resetLink).toBeDefined();
});
```

If we change the component a bit and add our `data-testid` attribute:

```jsx
return (
  <div className="flex justify-center mt-9">
    <div className="bg-gray-100 rounded-md">
      <form data-testid="password-form" ...>
        <p>We'll send a password reset link</p>
        <input
          type="text"
          id="email"
          data-testid="email-input"
          ...
        />
        ...
      </form>
    </div>
  </div>
);
```

We can then use these `data-testid` attributes directly instead:

```js
test("Should reset password", async ({ page }) => {
  await page.goto("http://localhost:3000/forgot");
  await page.getByTestId("email-input").fill(testEmailAddress);
  await page.getByTestId("password-form").click();
  // ...
});
```

Using the `getByTestId()` method we can make our tests cleaner and more readable than CSS attribute selectors.

## Removing `data-testid` from production

This depends on your tooling and framework. There's a plugin for every popular tool that allows the removal of custom attributes.

Let's say you're using Babel and JSX components (React). In that case, something like the [babel-plugin-jsx-remove-data-test-id](https://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id) library will fit your needs.

No matter what you choose, make sure to look at the documentation and select the correct attribute. In this post, we mentioned `data-testid`, but this is by no means required, so adjust accordingly to your project.


Write readable and durable Playwright tests using data-testid.

Automating React Playwright tests with data-testid


TL;DR. Try increasing the timeout so the email is received even with the delay

```js
// timeout of 10 minutes
cy.mailiskSearchInbox(namespace, {}, { timeout: 1000 * 60 * 10 });
```

---

When automating end-to-end tests involving emails, timing-related issues are common. Emails may take longer than expected to arrive, causing flaky tests or unexpected failures. We'll explore how to handle email delays when using Cypress with Mailisk

## Why Delays Happen

Email delivery can be delayed for various reasons. While Mailisk ensures your emails are reliably received, your email delivery provider might introduce delays. Here are some common causes:

- Network Latency: Emails take time to travel between servers.
- High Server Load: Sending a large volume of emails can cause processing delays.
- Email Service Provider Delays: ESPs might experience temporary slowdowns or throttling.

The first step is to determine if the issue is an email delivery delay or a backend bug preventing email sending.

### Check the Namespace Inbox

The simplest way to verify if emails are delayed or not sent at all is to check your namespace's inbox on Mailisk. If you've run recent tests and expect emails to have been sent, inspect the inbox. If no emails are there, they likely weren't sent.

Remember that the inbox displays all emails sent to that namespace, so even if there was a typo or it got sent to a wrong address, it should still appear here as long as it was sent to `{anything}@yournamespace.mailisk.net`.

### Increase the timeout

If emails are in the inbox but tests fail, increased delivery time might be the cause. By default, `cy.mailiskSearchInbox` has a 5-minute timeout. Increasing this might resolve the issue.

```js
// timeout of 10 minutes
cy.mailiskSearchInbox(namespace, {}, { timeout: 1000 * 60 * 10 });
```

Note that increasing the timeout too much prolongs test failure if emails aren't sent at all.

### Change the from_timestamp

Very unlikely, but another potential issue could be that the email arrives too soon. How?

In short, when you call `cy.mailiskSearchInbox`, by default it only looks at emails that arrived after a certain time—specifically, it ignores emails older than 15 minutes before the function was called.

For example: Suppose an email is sent, then your test runs for 20 minutes before calling `cy.mailiskSearchInbox`. In this case, the email would be ignored since it’s considered too old.

If this scenario applies to you, you can adjust the default `from_timestamp` of the function. Setting it to 0 ensures that all emails are searched, regardless of when they arrived

```js
// set from_timestamp to 0, all emails will be searched regardless of age
cy.mailiskSearchInbox(namespace, { from_timestamp: 0 });
```

## Wrapping It Up

When dealing with email delays in Cypress tests:

- Check your inbox first to confirm if emails were sent or not.
- If emails arrive late, try increasing the timeout.
- If emails arrive too early, adjust the from_timestamp so all relevant emails are included.

Experiment with these fixes and find what works best for your tests. Happy testing!


Different causes and ways to handle email delays in Cypress tests with Mailisk.

Handling email delays in Cypress tests


When you sign up for a website, you often need to verify your email. This step is there to make sure you’re using a real email address that you actually own. Without it, anyone could use any email address they wanted, which could cause all sorts of problems.

That's why it’s so important to test this feature. If email verification doesn’t work properly, people could sign up with someone else’s email address, or legitimate users might not be able to register at all. This can lead to a lot of headaches for both the site and its users. Automating testing for this ensures it works correctly every time, preventing these issues from happening.

For this post we'll be using the code available in this [repository](https://github.com/mailisk-app/email-verification-playwright).

To start off, let's quickly recap how email verification works:

1. The user visits the sign-up page, where they create an account. After singing up they are taken to a verify email page.
   - Depending on the flow, the user might have to log in again first.
2. Usually, right after signing up, the user will receive an email containing the verification code they need to enter.
3. The user enters the code they received. If successful, the user is redirected to the dashboard, and their account is now verified.

We'll need to automate this process. Luckily with Playwright we have access to all the necessary tools.

## Playwright

We're using Playwright for this. If this is your first time using Playwright take a look at [the guide](https://playwright.dev/docs/intro). The provided repository in this post already has Playwright setup.

## Mailisk

For extracting code from an email, we'll be using Mailisk which is an email testing service that has API endpoints for reading emails.

We'll be able to read emails sent to a subdomain like this `<anything>@mynamespace.mailisk.net`. Where `mynamespace` is the name of the [namespace](https://docs.mailisk.com/#creating-a-namespace).

Sending emails to these addresses allows us to read them using the API, enabling us to automate the email verification process. We'll look at this part again later.

In order to use Mailisk, you'll need to [sign up](https://mailisk.com), create a namespace, and get the API key. The [getting started guide](https://docs.mailisk.com/#getting-started) has all of the necessary information.

For Node we'll use the `mailisk` library:

```bash
npm install mailisk
```

## Getting started

Let's write a simple `email-verification.spec.ts` file.
The goal will be to test the following:

- Sign up
- Login
- Verify email
- Check if the user is redirected to the dashboard

We'll be using the app available in the [example repository](https://github.com/mailisk-app/email-verification-playwright).

First, let's create a `.env` file in the root of the project and add the following

```conf
MAILISK_API_KEY=<your-api-key>
MAILISK_NAMESPACE=<your-namespace>
```

We'll setup `playwright.config.ts` to use the `.env` file:

```ts
require("dotenv").config({ path: path.join(__dirname, "../.env") });
```

## Writing the test

Now let's write the test:

```ts
import { test, expect } from "@playwright/test";
import { MailiskClient } from "mailisk";

const namespace = process.env.MAILISK_NAMESPACE;

const mailisk = new MailiskClient({ apiKey: process.env.MAILISK_API_KEY });
```

With this we've initilized the Mailisk client. Which we can then use in our test

```ts
test.describe("Test email verification", () => {
  test("Should sign up, verify email, and login a new user", async ({ page }) => {
    const testEmailAddress = `test.${Date.now()}@${namespace}.mailisk.net`;
  });
});
```

First, we'll generate an email address, which we'll use throughout the entire test.

We're adding the current timestamp so that if we rerun the test, it will use a new email address. This prevents later tests from failing due to an older email being returned.

```ts
await page.goto("http://localhost:3000/register");
await page.fill("#email", testEmailAddress);
await page.fill("#password", "password");
await page.click('form button[type="submit"]');
// if the register was successful we should be redirected to the login screen
await expect(page).toHaveURL("http://localhost:3000/");

// Login as user
await page.fill("#email", testEmailAddress);
await page.fill("#password", "password");
await page.click('form button[type="submit"]');
// if the login was successful we should be redirected to the verify email screen, as we haven't verified our email yet
await expect(page).toHaveURL("http://localhost:3000/verify-email");
// at this point an email with the verification code will be sent by the backend
```

Then we sign up and log in. We are redirected to the verify email screen, where we have to enter the verification code sent to our email address.

## Extracting the code from the email

```ts
let code;

// we wait for the email to arrive, we filter by it's prefix
const { data: emails } = await mailisk.searchInbox(namespace, {
  to_addr_prefix: testEmailAddress,
});

const email = emails[0];
// we know that the code is the only number in the email, so we easily filter it out
code = email.text.match(/\d+/)[0];
expect(code).toBeDefined();

// now we enter the code and confirm our email
await page.fill("#email", testEmailAddress);
await page.fill("#code", code);
await page.click('form button[type="submit"]');

// we should be redirected to the dashboard as proof of a successful verification
await expect(page).toHaveURL("http://localhost:3000/dashboard");
```

We wait for the email to arrive by looking for an email with the prefix of our email address. We then filter out the code from the email and enter it into the form.

```ts
const { data: emails } = await mailisk.searchInbox(namespace, {
  to_addr_prefix: testEmailAddress,
});
```

This is a simple filter using the "TO" address of the destination email. Check out the README for [more advanced filtering](https://github.com/mailisk-app/mailisk-node?tab=readme-ov-file#searchinboxnamespace-params).

We should now be redirected to the dashboard as proof of a successful verification.

And that's it. With this, we have automated the email verification process.

For reference. Here's how the final `email-verification.spec.ts` file looks like:

```ts
import { test, expect } from "@playwright/test";
import axios from "axios";
import { MailiskClient } from "mailisk";

const namespace = process.env.MAILISK_NAMESPACE;

const mailisk = new MailiskClient({ apiKey: process.env.MAILISK_API_KEY });

test.describe("Test email verification", () => {
  test("Should sign up, verify email, and login a new user", async ({ page }) => {
    const testEmailAddress = `test.${Date.now()}@${namespace}.mailisk.net`;

    await page.goto("http://localhost:3000/register");
    await page.fill("#email", testEmailAddress);
    await page.fill("#password", "password");
    await page.click('form button[type="submit"]');
    // if the register was successful we should be redirected to the login screen
    await expect(page).toHaveURL("http://localhost:3000/");

    // Login as user
    await page.fill("#email", testEmailAddress);
    await page.fill("#password", "password");
    await page.click('form button[type="submit"]');
    // if the login was successful we should be redirected to the verify email screen, as we haven't verified our email yet
    await expect(page).toHaveURL("http://localhost:3000/verify-email");
    // at this point an email with the verification code will be sent by the backend

    // Verify email
    await page.goto("http://localhost:3000/verify-email");

    let code;

    // we wait for the email to arrive, we filter by it's prefix
    const { data: emails } = await mailisk.searchInbox(namespace, {
      to_addr_prefix: testEmailAddress,
    });

    const email = emails[0];
    // we know that the code is the only number in the email, so we easily filter it out
    code = email.text.match(/\d+/)[0];
    expect(code).toBeDefined();

    // now we enter the code and confirm our email
    await page.fill("#email", testEmailAddress);
    await page.fill("#code", code);
    await page.click('form button[type="submit"]');

    // we should be redirected to the dashboard as proof of a successful verification
    await expect(page).toHaveURL("http://localhost:3000/dashboard");

    // Login as user again
    // as a sanity check we want to ensure our email is verified, by logging in again
    await page.goto("http://localhost:3000/");
    await page.fill("#email", testEmailAddress);
    await page.fill("#password", "password");
    await page.click('form button[type="submit"]');
    // this time we should be redirected to the dashboard since we've verified the email
    await expect(page).toHaveURL("http://localhost:3000/dashboard");
  });
});
```


Learn how to test email verification functionality using Playwright with Mailisk.

Email verification with Playwright


In React applications, using `data-testid` with Cypress makes it easy to select elements for testing. This approach is ideal when UI components change frequently but need consistent functionality. By using a unique `data-testid` for each element, tests are simpler to maintain and more stable, as these identifiers allow straightforward access to components, regardless of visual changes.

## Why data-testid?

Since they look the same, why should would we use `data-testid` over `id`?

```jsx
// Using data-testid
function LoginButton() {
  return <button data-testid="login-button">Log In</button>;
}

// Using id
function LoginButton() {
  return <button id="login-button">Log In</button>;
}
```

- `data-testid` indicates its use for testing, which helps it stand out from other attributes like id or class that might be used for styling or scripting
- Since `data-testid` is solely for testing, your tests remain unaffected by changes to styles or scripts that use id or class for other purposes
- `data-testid` can be safely removed in production. This keeps the production code clean and optimized, while also preventing easy scraping

A large benefit is also the improved readability. With `data-testid`, you can use descriptive names that reflect the element's role. Additionally, this can be added to more elements since it doesn't affect styles.

```jsx
cy.get('[data-testid="login-button"]').click();
```

For a comparison of different selectors, the Cypress documentation provides a table which can be found [here](https://docs.cypress.io/guides/references/best-practices#How-It-Works). But in summary, `data-testid` offers the best benefit, allowing full isolation from testing and production.

## Example

Let's take a look at a practical example.

Suppose we had this test that relies on id selectors:

```js
it("Should reset password", () => {
  cy.visit("http://localhost:3000/forgot");
  cy.get("#email").type(testEmailAddress);
  cy.get("form").submit();
  // this will send an email with a reset link to the provided email address

  cy.mailiskSearchInbox(Cypress.env("MAILISK_NAMESPACE"), {
    to_addr_prefix: testEmailAddress,
    subject_includes: "reset",
    timeout: 1000 * 60,
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    resetLink = email.text.match(/.*\[(http:\/\/localhost:3000\/.*)\].*/)[1];
    expect(resetLink).to.not.be.undefined;
  });
});
```

If we change the component a bit and add our `data-testid` attribute:

```jsx
return (
  <div className="flex justify-center mt-9">
    <div className="bg-gray-100 rounded-md">
      <form data-testid="password-form" ...>
        <p>We'll send a password reset link</p>
        <input
          type="text"
          id="email"
          data-testid="email-input"
          ...
        />
        ...
      </form>
    </div>
  </div>
);
```

We can then use these `data-testid` attributes directly instead:

```js
it("Should reset password", () => {
  cy.visit("http://localhost:3000/forgot");
  cy.get('[data-testid="email-input"]').type(testEmailAddress);
  cy.get('[data-testid="password-form"]').submit();
  ...
});
```

## Removing `data-testid` from production

This is dependent on your project tooling and frameworks. There's a plugin for every popular tool that allows the removal of custom attributes (data-testid is an attribute, after all).

For example, let's say you're using Babel and JSX components (React). In that case, something like the [babel-plugin-jsx-remove-data-test-id](https://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id) library will fit your needs.

No matter what you choose, make sure to look at the documentation and select the correct attribute. In this post, we mentioned `data-testid`, but this is by no means a standard, so adjust accordingly to your project.


Enhance testing with precise, maintainable Cypress tests using data-testid.

Using data-testid in React Cypress tests


When it comes to automating signups, verification codes are almost always used. These codes serve as an additional layer of security, ensuring that the user signing up is genuine and has access to the email associated with the account.

Verification codes range from only digits to mixed characters; it all depends on the platform.
￼
![result-preview](/blog/extract-verification-codes-with-cypress/verification-example.png)

How do we go about parsing and extracting these codes?

There’s two ways: we either focus on the **text** and search based on that, or we look for **html** elements in the email that contain the said code. Sometimes, a bit of both is required. In this post, we’ll explore both methods and show some common examples.

If you're looking for a more general guide on how to automate the verification flow, check out [Email verification with Cypress](/blog/email-verification-cypress)

## Searching with Regex

If our verification code consists solely of digits, we can write a simple regex that searches for a digit string of a certain length. If the verification code is 6 digits, we can use the following regex:

```js
\b(\d{6})\b
```

```js
it("Should verify email", () => {
  let code;

  cy.mailiskSearchInbox(Cypress.env("MY_NAMESPACE"), {
    to_addr_prefix: "testuser",
    subject_includes: "verification code",
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    // we search the text version of the email
    const match = email.text.match(/\b(\d{6})\b/);
    expect(match.length).toBeGreaterThan(0);
    code = match[1];
    expect(code).to.not.be.undefined;
  });

  console.log("Your code is: " + code);
  ...
});
```

In the above code, we used the `text` version of the email. This doesn't contain a lot of the HTML clutter like styles, tags and classes, making it less likely we'd match the wrong content.

But what if the code contains both digits and letters? In this case, the Regex method isn't quite enough unless there's a prefix before the code that we can use. In the above example, the text version looks like this:

> Please enter this verification code to get started on CoolApp: \\n> \\n> 065406 \\n> \\n>

Let's modfiy the code so it includes both numbers and letters, making it harder to extract:

> Please enter this verification code to get started on CoolApp: \\n> \\n> A3G56L \\n> \\n>

Since we know that the code is after `verification code to get started on CoolApp:` we can include this in our regex, modifying it like so:

```js
verification code to get started on CoolApp:.\*([A-Z0-9]{6})
```

```js
it("Should verify email", () => {
  let code;

  cy.mailiskSearchInbox(Cypress.env("MY_NAMESPACE"), {
    to_addr_prefix: "testuser",
    subject_includes: "verification code",
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    // we search the text version of the email
    const match = email.text.match(/verification code to get started on CoolApp:.*([A-Z0-9]{6})/);
    expect(match.length).toBeGreaterThan(0);
    code = match[1];
    expect(code).to.not.be.undefined;
  });

  console.log("Your code is: " + code);
  ...
});
```

We constructed our regex in three parts. First the prefix which ends on `CoolApp:`, then any characters `.*` and finally the format of our code `[A-Z0-9]{6}`.

Of course, in this example, simply using `\b[A-Z0-9]{6}\b` would have been enough. However, this can fail depending on the text content and lenght of the code, which is why we used the prefix.

## Searching with HTML

Using HTML is usually a surefire way to easily extract verification codes. The reason is that most codes are marked differently (e.g., bolded), making them easy for the user to see and for us to extract.

Let's use the [cheerio](https://www.npmjs.com/package/cheerio) package. This will allow us to use selectors to fetch certain parts of the HTML.

In this example the email's `html` contains the following:

```html
...
<tr>
  <td class="h1 black" align="left" dir="ltr" style="...">065406</td>
</tr>
...
```

This is quite convenient, as in this example there is only one `td` element with `h1 black`. If there were more then we'd have to filter from higher in the hierarchy (e.g. tr, table, etc.).

```js
it("Should verify email", () => {
  let code;

  cy.mailiskSearchInbox(Cypress.env("MY_NAMESPACE"), {
    to_addr_prefix: "testuser",
    subject_includes: "verification code",
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    // we load the email html into cheerio
    const $ = cheerio.load(email.html);
    // we find the element using the selector
    const nodesText = $("td.h1.black").text();
    // since there's one element and it only contains the code we can extract it directly
    const code = nodesText;
    expect(code).to.not.be.undefined;
  });

  console.log("Your code is: " + code);
  ...
});
```

And there we have it – two ways verification codes can be parsed and extracted from emails.


Parsing and extracting verification codes using Cypress and Mailisk for streamlined testing processes.

Extracting verification codes with Cypress


Email verification is standard practice on websites to validate users. It's done during the sign-up phase and ensures that the user says who they say they are (at least the email address). Without email verification, anybody could use any email address.

We can see why this is a test case we would want covered. If it doesn't function correctly, users can sign up using others' email addresses or, worse, prevent legitimate users from signing up.

If you want to follow along or view the final result, you can check out the [repository](https://github.com/mailisk-app/email-verification-cypress).

Now, let's explore how email verification functionality usually works:

1. The user visits the sign-up page, where they create an account. Afterward they are taken to a verify email page.
   - Depending on the flow, the user might have to log in again first.
2. Usually, right after signing up, the user receives an email containing the code they need to enter.
3. The user provides an email address and the code they received. If successful, the user is redirected to the dashboard.

We need to solve the issue of retrieving the code from the email, as plain Cypress isn't enough for this step.

## Cypress

We're using Cypress as the testing framework. If this is your first time using Cypress, take a look at their [Installation guide](https://docs.cypress.io/guides/getting-started/installing-cypress). The provided repository in this post already has Cypress setup.

## Mailisk

For extracting the code from an email, we'll be using Mailisk and it's [Cypress plugin](https://docs.mailisk.com/guides/cypress.html). Mailisk is an email testing service offering API endpoints for reading emails.

This lets us create a virtual email server that we can send emails to. The email addreses look like this `<anything>@mynamespace.mailisk.net`. Where `mynamespace` is the name of the [namespace](https://docs.mailisk.com/#creating-a-namespace).

Sending emails to these addresses allows us to read them using the API, enabling us to automate the email verification process. We'll look at this part again later.

## cypress-mailisk setup

Since we're using Cypress as our testing framework, we'll also be using the cypress-mailisk plugin. This will give us a simple command to access the received emails.

First install the plugin using

```shell
npm install -D cypress-mailisk
```

After installing the package add the following in your project's `cypress/support/e2e.js`

```js
import "cypress-mailisk";
```

In order to be able to use the API we'll also need to add our [API key](https://docs.mailisk.com/#getting-your-api-key) to `cypress.config.js`. An additional thing we'll be adding is the `MAILISK_NAMESPACE`. Doing this will let us easily use a different namespace.

```js
module.exports = defineConfig({
  env: {
    MAILISK_API_KEY: "YOUR_API_KEY",
    MAILISK_NAMESPACE: "YOUR_NAMESPACE", // we're also adding this
  },
});
```

## Writing the test

In the `app/cypress/e2e` folder we'll add a `email-verification.cy.js` file with the following contents

```js
describe("Test email verification", () => {
  const testEmailAddress = `test.${new Date().getTime()}@${Cypress.env("MAILISK_NAMESPACE")}.mailisk.net`;

  it("Should sign up a new user", () => {
    cy.visit("http://localhost:3000/register");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("password");
    cy.get("form").submit();
    // if the register was successful we should be redirected to the login screen
    cy.location("pathname").should("eq", "/");
  });

  it("Should login as user", () => {
    cy.visit("http://localhost:3000/");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("password");
    cy.get("form").submit();
    // if the login was successful we should be redirected to the verify email screen, as we haven't verified our email yet
    cy.location("pathname").should("eq", "/verify-email");
    // at this point an email with the verification code will be sent by the backend
  });

  it("Should verify email", () => {
    cy.visit("http://localhost:3000/verify-email");

    // TODO: we need to fill this out
  });

  it("Should login as user again", () => {
    // as a sanity check we want to ensure our email is verified, by logging in again
    cy.visit("http://localhost:3000/");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("password");
    cy.get("form").submit();
    // this time we should be redirected to the dashboard since we've verified the email
    cy.location("pathname").should("eq", "/dashboard");
  });
});
```

This is a basic test which:

- creates a user
- tries logging in,
- verifying the email,
- and logging in again

You probably noticed the following code

```js
const testEmailAddress = `test.${new Date().getTime()}@${Cypress.env("MAILISK_NAMESPACE")}.mailisk.net`;
```

We'll need a unique email address for the user. This will create a string similar to this

```js
test.123456789@mynamespace.mailisk.net
```

This matches the pattern Mailisk uses for emails

```js
<anything>@mynamespace.mailisk.net
```

The only difference is that we added the current time to the email. We're using this as a filtering mechanism. If we run the same test later, we can be sure there won't be any other emails for this user. This way checking for a new email will be really easy. And since with Mailisk we have unlimited email addresses, there's no worry of using them up.

### Reading the email

Now, let's take a look at the email verification part

```js
it("Should verify email", () => {
  cy.visit("http://localhost:3000/verify-email");

  // TODO: we need to fill this out
});
```

In our demo app. After a user signs up, an email with the verification code is sent to their email address. Our task is to read that email, extract the code, and use it on the verify-email page so the email is verified.

Let's use the [cy.mailiskSearchInbox](https://docs.mailisk.com/guides/cypress.html#cy-mailisksearchinbox) command for this

```js
it("Should verify email", () => {
  cy.visit("http://localhost:3000/verify-email");

  let code;
  // mailiskSearchInbox will automatically keep retrying until an email matching the prefix arrives
  // by default it also has a from_timestamp that prevents older emails from being returned by accident
  // find out more here: https://docs.mailisk.com/guides/cypress.html#usage
  cy.mailiskSearchInbox(Cypress.env("MAILISK_NAMESPACE"), {
    to_addr_prefix: testEmailAddress,
    subject_includes: "verify",
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    // we know that the code is the only number in the email, so we easily filter it out
    code = email.text.match(/\d+/)[0];
    expect(code).to.not.be.undefined;

    // now we enter the code and confirm our email
    cy.get("#email").type(testEmailAddress);
    cy.get("#code").type(code);
    cy.get("form").submit();

    // we should be redirected to the dashboard as proof of a successful verification
    cy.location("pathname").should("eq", "/dashboard");
  });
});
```

Let's break down what this does:

### mailiskSearchInbox

The `cy.mailiskSearchInbox` command takes a namespace, options and callback as it's parameters. We're using the namespace that we defined in the env earlier.

For the options, we pass our email in `to_addr_prefix`. This way, only emails sent **to** this email address are returned.

Since a namespace can have unlimited email addresses, if we don't filter, it would return emails from all addresses in this namespace. Including the ones we're not interested in, such as `john@mynamespace.mailisk.net`.

`subject_includes` filters our email such that it must include the string in the subject (case-insensitive). Since we know that the subject will be **"Verify your email"**, we can also filter by it. This is essential for multi-step tests that might first register an account (register email) then verify it (verify email). If we didn't filter by subject we could get the incorrect email.

### The callback

In the callback we get the `data` which represents all the emails found. Since in this scenario only 1 email will be sent, we filter it out. Next, we use some regex to look inside this string `Your verification code is: {code}`. Since the code is the only digits in this string, we can use a simple regex to filter out the number.

Finally, we have our code. We then enter the code (and email since the app requires it), click "Submit" and our user if verified.

If we run the E2E spec all of our tests should pass.

![result-preview](/blog/password-reset-cypress/email-verification.cy.js.mp4)


Learn how to test email verification functionality using Cypress with Mailisk.

Email verification with Cypress


Testing password reset functionality is an important part of ensuring the security and reliability of any web application. In this tutorial, we will learn how to test password reset in Selenium with Node.js.

In order to test this functionality we'll also need some demo app which supports password reset. For ease of use the final code including the test app for this post is available on [GitHub](https://github.com/mailisk-app/password-reset-selenium-node).

## Selenium Setup

We'll be using the `selenium-webdriver` library in Node. You can add this into your project using the following command

```shell
npm install selenium-webdriver
```

We're not setup to use selenium quite yet though, we'll also need to install the relevant _driver_. In this example we'll be using chrome and install the [ChromeDriver](https://sites.google.com/chromium.org/driver/?pli=1). For an easier setup let's use the `chromedriver` npm package which uses one of the latest ChromeDriver versions. It's installed like so

```shell
npm install chromedriver
```

This will make it easier for other developers to checkout our repository since they won't need to do a separate installation step for the driver, doing `npm install` will be enough.

## Writing the test

We'll write a test which focuses on the key aspects of resetting passwords

1. Create a new user, this will make it easier to run the test by itself with no other dependent logic.
2. Login as this user, here we'll just confirm that the selected password works.
3. Reset the password for this user, this will be a two step process. First we'll trigger the password reset email, after it arrives we'll enter our new password and reset it.
4. Login with new password, finally we confirm that the new password is accepted and the password reset works as expected.

As mentioned before, we're using the app available in the [repository](https://github.com/mailisk-app/password-reset-selenium-node) which has both the frontend and backend already prepared.

Let's start by getting the parts not related to emails out of the way. Here are the contents of our `password-reset.test.js`

```js
const { Builder, By } = require("selenium-webdriver");
const { MailiskClient } = require("mailisk");

(async function passwordResetTest() {
  let resetLink;
  const namespace = "mynamespace";
  const testEmailAddress = `test.${new Date().getTime()}@${namespace}.mailisk.net`;

  const mailisk = new MailiskClient({ apiKey: "YOUR_API_KEY" });

  // Create a new Chrome driver
  let driver = await new Builder().forBrowser("chrome").build();

  try {
    // Let's visit the signup page and create a new user
    await driver.get("http://localhost:3000/register");
    await new Promise((r) => setTimeout(r, 500));
    await driver.findElement(By.id("email")).sendKeys(testEmailAddress);
    await driver.findElement(By.id("password")).sendKeys("password");
    await driver.findElement(By.css("form")).submit();
    await new Promise((r) => setTimeout(r, 500));

    // We should have been redirected to the login page, so let's enter our credentials
    await driver.findElement(By.id("email")).sendKeys(testEmailAddress);
    await driver.findElement(By.id("password")).sendKeys("password");
    await driver.findElement(By.css("form")).submit();
    await new Promise((r) => setTimeout(r, 500));

    // Let's send a password reset email
    await driver.get("http://localhost:3000/forgot");
    await new Promise((r) => setTimeout(r, 500));
    await driver.findElement(By.id("email")).sendKeys(testEmailAddress);
    await driver.findElement(By.css("form")).submit();
    // the reset email is sent here!

    // Now we wait for the email to arrive extract the link
    // TODO: we'll need to implement this part

    // We visit the reset link and set the new password
    await driver.get(resetLink);
    await new Promise((r) => setTimeout(r, 500));
    await driver.findElement(By.id("new-password")).sendKeys("newpassword");
    await driver.findElement(By.css("form")).submit();
    await new Promise((r) => setTimeout(r, 500));

    // Let's try logging in again, but this time with the new password
    await driver.get("http://localhost:3000");
    await new Promise((r) => setTimeout(r, 500));
    await driver.findElement(By.id("email")).sendKeys(testEmailAddress);
    await driver.findElement(By.id("password")).sendKeys("newpassword");
    await driver.findElement(By.css("form")).submit();
    await new Promise((r) => setTimeout(r, 500));

    // If we successfully log in, the app will redirect us to the dashboard
    let currentUrl = await driver.getCurrentUrl();
    if (currentUrl !== "http://localhost:3000/dashboard") {
      throw new Error(`Expected url to be 'http://localhost:3000/dashboard' got '${currentUrl}'`);
    }
  } catch (error) {
    console.error(error);
  } finally {
    // Close the browser
    await driver.quit();
  }
})();
```

The provided code above implements most of the key steps in resetting the password. We only need some way to receive the email programmatically and get the reset link.

## Receiving Email

We'll use the [mailisk](https://github.com/mailisk-app/mailisk-node) library to fetch the password emails. First install it with

```shell
npm install mailisk
```

The test sample above already contains some relevant code, such as importing the library and creating a client

```js
const { MailiskClient } = require("mailisk");
...
const mailisk = new MailiskClient({ apiKey: "YOUR_API_KEY" });
```

In order to use the client, you'll also need an api key, you can find yours in the [dashboard](https://docs.mailisk.com/#getting-your-api-key).

Mailisk works based on _namespaces_ you can think of these as a catch-all address which we can access programmatically. For example if we have the namespace `mynamespace` we can find all emails sent to `john@mynamespace.mailisk.net` (you can replace `john` with any valid email address).

```js
...
const namespace = "mynamespace";
const testEmailAddress = `test.${new Date().getTime()}@${namespace}.mailisk.net`;
```

We use this snippet of code to create a unique email address **per test**. Every time the test starts it'll create a new user using a random email address, which will look like this

```js
test.123456789@mynamespace.mailisk.net
```

This means we don't have to worry about clutter due to existing emails (e.g. it returning an old email with an invalid reset link).

### searchInbox

In order to read the email we'll fill out the missing code using mailisk's `searchInbox` function

```js
// Now we wait for the email to arrive extract the link
const { data: emails } = await mailisk.searchInbox(namespace, {
  to_addr_prefix: testEmailAddress,
});
const email = emails[0];
resetLink = email.text.match(/.*\[(http:\/\/localhost:3000\/.*)\].*/)[1];
```

The `searchInbox` function takes a namespace and options. We use the `to_addr_prefix` option to filter out emails sent to other addresses (e.g. `john@mynamespace.mailisk.net`). In combination with the email being random, this ensures that we're guaranteed to only find the password reset email.

> By default the `searchInbox` function filters out older emails and waits for at least one email to be returned. Which is why we don't need to pool/wait manually for the results.

As a response, we'll get an array of emails, but we only care about the one. We'll run some regex to filter out the link and assign it to `resetLink` so it can be used later in the test.

And that's it. We've got an automated test that will reset the password and try logging in again with the new password.


Learn how to implement a password reset test with Selenium in Node, using the mailisk library.

Password reset with Selenium in Node


You've probably found a dozen posts about sending emails with Node. But what about _receiving_ them?

## Why?

When would you want to receive emails instead of sending them? The most common use cases are for testing password resets and email flows. A common email flow is signing up, receiving a code and entering that code to signup.

## How?

We'll be using the [mailisk](https://github.com/mailisk-app/mailisk-node) library for receiving emails. This is a free email testing service which allows us to read emails. It works by creating a virtual email server that we can send emails to.

The email addreses look like this `<anything>@mynamespace.mailisk.net`. Where `mynamespace` is the name of your [namespace](https://docs.mailisk.com/#creating-a-namespace). An email sent to an address that ends in `@mynamespace.mailisk.net` can be read using the API.

## Setup

Install the library with

```shell
npm install mailisk
```

We'll interact with the API using the **client**, you can create one by passing your [API Key](https://docs.mailisk.com/#getting-your-api-key)

```js
const { MailiskClient } = require("mailisk");

const mailisk = new MailiskClient({ apiKey: "YOUR_API_KEY" });
```

## Receiving Email

We can use the [searchInbox](https://github.com/mailisk-app/mailisk-node#searchinboxnamespace-params) function to receive emails. It only needs one parameter, our [namespace](https://docs.mailisk.com/#creating-a-namespace).

```js
const { MailiskClient } = require("mailisk");

const mailisk = new MailiskClient({ apiKey: "YOUR_API_KEY" });

mailisk.searchInbox("mynamespace").then(console.log);
```

A note here is that, by default, this will only return the _latest_ emails - any emails received in the past 5 seconds. This can be changed by overriding the `from_timestamp` parameter. You can check the [docs](https://github.com/mailisk-app/mailisk-node#searchinboxnamespace-params) for more information.

With that in mind, let's change it so it gives us all the emails in the inbox, regardless of when they were received

```js
mailisk.searchInbox("mynamespace", { from_timestamp: 0 }).then(console.log);
```

In order to show this works we'll need to send an email. You can send one using your own email provider (e.g. Gmail). Any address that ends with your namespace will work, here let's simply send it to `john@mynamespace.mailisk.net`

After sending the email and executing the script, this is what we get in the console

```js
{
  total_count: 1,
  options: { limit: 10, offset: 0, from_timestamp: 0, wait: true },
  data: [
    {
      id: '1667305800547-9KJHqVLG5',
      from: { address: 'test@example.com', name: '' },
      to: [ { address: 'john@mynamespace.mailisk.net', name: '' } ],
      subject: 'This is a test',
      html: 'false',
      text: 'Something goes here',
      received_date: '2022-11-01T12:30:00.000Z',
      received_timestamp: 1667305800,
      expires_timestamp: 1667565000,
    }
  ]
}
```

### Sending emails

To make testing a bit easier we can also use mailisk to _send_ emails. These can only be sent to mailisk namespaces though

```js
...
const namespace = 'mynamespace'

await mailisk.sendVirtualEmail(namespace, {
  from: 'test@example.com',
  to: `john@${namespace}.mailisk.net`,
  subject: 'Testing',
  text: 'This is a test.',
})
```

As an example, let's send ourselves an email and then read it

```js
const { MailiskClient } = require("mailisk");

const namespace = "mynamespace";

// create client
const mailisk = new MailiskClient({ apiKey: "YOUR_API_KEY" });

async function main() {
  // send email
  await mailisk.sendVirtualEmail(namespace, {
    from: "test@example.com",
    to: `john@${namespace}.mailisk.net`,
    subject: "Testing",
    text: "This is a test.",
  });

  // receive latest email
  const { data: emails } = await mailisk.searchInbox(namespace, {
    to_addr_prefix: `john@${namespace}.mailisk.net`,
  });

  // print out the subjects of all the recieved emails
  for (const email of emails) {
    console.log(`Received email with subject '${email.subject}'`);
  }
}

main().then(() => console.log("Done"));
```

You'll notice we also used `to_addr_prefix` here. This let's us filter the emails we fetch by their destination address. In this example we sent an email to `john@...`, and therefore we only care about emails sent to `john@...`. If we didn't filter this we would also return other emails, such as ones sent to `somethingelse@...`

## Closing notes

This should be enough to get you up and started with receiving emails in Node.

If you're using Cypress take a look at our post on [Password reset with Cypress](https://mailisk.com/blog/password-reset-cypress), which features the mailisk cypress plugin (and an example repository). Otherwise there's additional information about options for fetching emails in the [documentation](https://docs.mailisk.com/guides/nodejs.html) and [API Reference](https://docs.mailisk.com/api-reference/)


Sending emails is cool, but what about receiving them?

Receive emails with Node


Every website that has user accounts with passwords typically includes a "Forgot password?" function, which is a common test case that needs to be covered.

If you want to follow along or view the final result, you can check out the [repository](https://github.com/mailisk-app/password-reset-cypress).

Now, let's explore how the password reset functionality usually works:

1. The user clicks "Forgot password", which redirects them to a reset password screen.
2. The user provides the email they want to reset the password for, and an email containing a reset link is sent to that address.
3. The user clicks the link from the email, taking them to a new page where they can enter their new password.
4. The user can now login with their new password.

The hard part here is getting the password reset link from an email. Automating the rest is pretty easy with Cypress.

## Cypress

We're using Cypress as the testing framework. If this is your first time using Cypress, take a look at their [Installation guide](https://docs.cypress.io/guides/getting-started/installing-cypress). The provided repository in this post already has Cypress setup.

## Mailisk

For _"getting the password reset link from an email"_ part, we'll be using Mailisk and it's [Cypress plugin](https://docs.mailisk.com/guides/cypress.html). Mailisk is an email testing service offering API endpoints for reading emails.

This lets us create a virtual email server that we can send emails to. The email addreses look like this `<anything>@mynamespace.mailisk.net`. Where `mynamespace` is the name of the [namespace](https://docs.mailisk.com/#creating-a-namespace).

Sending emails to these addresses allows us to read them using the API, enabling us to automate the email password reset process. We'll look at this part again later.

## cypress-mailisk setup

Since we're using Cypress as our testing framework, we'll also be using the cypress-mailisk plugin. This will give us a simple command to access the received emails.

First install the plugin using

```shell
npm install -D cypress-mailisk
```

After installing the package add the following in your project's `cypress/support/e2e.js`

```js
import "cypress-mailisk";
```

In order to be able to use the API we'll also need to add our [API key](https://docs.mailisk.com/#getting-your-api-key) to `cypress.config.js`. An additional thing we'll be adding is the `MAILISK_NAMESPACE`. Doing this will let us easily use a different namespace.

```js
module.exports = defineConfig({
  env: {
    MAILISK_API_KEY: "YOUR_API_KEY",
    MAILISK_NAMESPACE: "YOUR_NAMESPACE", // we're also adding this
  },
});
```

## Writing the test

In the `app/cypress/e2e` folder we'll add a `password-reset.cy.js` file with the following contents

```js
describe("Test password reset", () => {
  let resetLink;
  const testEmailAddress = `test.${new Date().getTime()}@${Cypress.env("MAILISK_NAMESPACE")}.mailisk.net`;

  it("Should sign up a new user", () => {
    cy.visit("http://localhost:3000/register");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("password");
    cy.get("form").submit();
    // if the register was successful we should be redirected to the login screen
    cy.location("pathname").should("eq", "/");
  });

  it("Should login as user", () => {
    cy.visit("http://localhost:3000/");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("password");
    cy.get("form").submit();
    // if the login was successful we should be redirected to the dashboard screen
    cy.location("pathname").should("eq", "/dashboard");
  });

  it("Should reset password", () => {
    cy.visit("http://localhost:3000/forgot");

    cy.get("#email").type(testEmailAddress);
    cy.get("form").submit();
    // this will send an email with a reset link to the provided email address

    // TODO: we need to fill this out
  });

  it("Should visit reset link and set new password", () => {
    cy.visit(resetLink);

    cy.get("#new-password").type("newpassword");
    cy.get("form").submit();
    // if the reset was successful we should be redirected to the login screen
    cy.location("pathname").should("eq", "/");
  });

  it("Should login as user with new password", () => {
    cy.visit("http://localhost:3000/");

    cy.get("#email").type(testEmailAddress);
    cy.get("#password").type("newpassword");
    cy.get("form").submit();
    // if the login was successful we should be redirected to the dashboard screen
    cy.location("pathname").should("eq", "/dashboard");
  });
});
```

This is a basic test which:

- creates a user
- tries logging in
- resetting the password
- logging in again.

You probably noticed the following code

```js
const testEmailAddress = `test.${new Date().getTime()}@${Cypress.env("MAILISK_NAMESPACE")}.mailisk.net`;
```

Since we'll be registering and resetting the password of a user, we need an email for them. This will create a string similar to this

```js
test.123456789@mynamespace.mailisk.net
```

This matches the pattern Mailisk uses for emails

```js
<anything>@mynamespace.mailisk.net
```

The only difference is that we added the current time to the email. We're using this as a filtering mechanism. If we run the same test later, we can be sure there won't be any other emails for this user. This way checking for a new email will be really easy. And since with Mailisk we have unlimited email addresses, there's no worry of using them up.

### Reading the email

Now let's take a look at the password reset part

```js
it("Should reset password", () => {
  cy.visit("http://localhost:3000/forgot");

  cy.get("#email").type(testEmailAddress);
  cy.get("form").submit();
  // this will send an email with a reset link to the provided email address

  // TODO: we need to fill this out
});
```

After entering the email and clicking the submit button, an email is sent to the provided email address. Our task is to read the email, extract the link, and store it in the variable `resetLink` so that we can visit it in the subsequent step.

Let's use the [cy.mailiskSearchInbox](https://docs.mailisk.com/guides/cypress.html#cy-mailisksearchinbox) command for this

```js
it("Should reset password", () => {
  cy.visit("http://localhost:3000/forgot");

  cy.get("#email").type(testEmailAddress);
  cy.get("form").submit();
  // this will send an email with a reset link to the provided email address

  cy.mailiskSearchInbox(Cypress.env("MAILISK_NAMESPACE"), {
    to_addr_prefix: testEmailAddress,
    subject_includes: "reset",
  }).then((response) => {
    const emails = response.data;
    const email = emails[0];
    resetLink = email.text.match(/.*\[(http:\/\/localhost:3000\/.*)\].*/)[1];
    expect(resetLink).to.not.be.undefined;
  });
});
```

Let's break down what this does:

### mailiskSearchInbox

The `cy.mailiskSearchInbox` command takes a namespace, options and callback as it's parameters. We're using the namespace that we defined in the env earlier.

For the options, we pass our email in `to_addr_prefix`. This way, only emails sent **to** this email address are returned.

Since a namespace can have unlimited email addresses, if we don't filter, it would return emails from all addresses in this namespace. Including the ones we're not interested in, such as `john@mynamespace.mailisk.net`.

`subject_includes` filters our email such that it must include the string in the subject (case-insensitive). Since we know that the subject will be **"Reset password code"**, we can also filter by it. This is essential for multi-step tests that might first register an account (register email) then verify it (verify email). If we didn't filter by subject we could get the incorrect email.

Finally we use `timeout`, otherwise we'd wait forever for an email if something went wrong.

### The callback

In the callback we get the `data` which represents all the emails found. Since in this scenario only 1 email will be sent, we filter it out. Next, we use some regex to look for this string `http://localhost:3000/anythingafterthis`.

And et voilà we have our link, we just save this in the global variable `resetLink` so it can be used in the next test (where it vists the link and resets the password).

And that's it, we've automated the password reset using Cypress and Mailisk.

If we run the E2E spec all of our tests should pass.

![result-preview](/blog/password-reset-cypress/result-preview.mp4)


Use Cypress together with Mailisk to receive emails and test password reset functionality.

Password reset with Cypress


Today we’re adding support for virtual SMTP. This will allow you to send emails with SMTP to any Mailisk namespace. This isn’t meant as a replacement for 3rd party email services, but a way to bulk test transactional email without incuring additional cost.

## Where should I use this?

If you’re already using Mailisk for your integration tests you can also switch to using Mailisk for outbound emails on your backend local/development environment. There aren’t any additional costs for sending emails and no outbound limits. So there is no risk of your tests failing because you’ve hit a limit on your email delivery service.

## How do I send emails?

There’s a [new section](https://docs.mailisk.com/smtp.html) in the docs with an example for [NodeJS](https://docs.mailisk.com/guides/nodejs.html#sending-email). Here’s the code snippet for sending email using SMTP:

```jsx
const nodemailer = require("nodemailer");

const SMTP_USER = "yournamespace@mailisk.net";
const SMTP_PASSWORD = "password";

const transport = nodemailer.createTransport({
  pool: true,
  host: "smtp.mailisk.net",
  port: 587,
  secure: false,
  auth: {
    user: SMTP_USER,
    pass: SMTP_PASSWORD,
  },
});

async function main() {
  await transport.sendMail({
    from: "hello@test.com",
    to: "test@yournamespace.mailisk.net",
  });
}

main().catch(console.error);
```

## What’s the plan for the future?

Mailisk isn’t an email delivery service, so outbound features won’t be a main focus. But for ease of use, we’re working on adding support to deliver email to addresses outside of Mailisk namespaces. This will allow you to use Mailisk SMTP for transactional emails in staging environments.


Sending outbound emails to Mailisk namespaces is now supported.

Mailisk Blog