# TestCafe email and OTP testing

MailSlurp fits TestCafe when TestCafe drives the browser and the MailSlurp JavaScript SDK manages inbox state. A common pattern is to create a fresh inbox for the test, submit `inbox.emailAddress` in the sign-up form, wait for the verification email, extract the code, and type it back into the UI.

## Install

```bash
npm install --save mailslurp-client
```

## Create an inbox with the JavaScript SDK

```javascript
// create an inbox
const inbox = await mailslurp.inboxController.createInboxWithDefaults();
expect(inbox.emailAddress).toMatch(/.+@.+/);
```

## Example TestCafe OTP flow

```javascript
import { MailSlurp } from "mailslurp-client";
import { Selector } from "testcafe";

const mailslurp = new MailSlurp({ apiKey: process.env.API_KEY });

fixture`Sign up`.page`https://your-app.example/sign-up`;

test("completes email OTP verification", async (t) => {
  const inbox = await mailslurp.createInbox();

  await t
    .typeText('input[name="email"]', inbox.emailAddress)
    .typeText('input[name="password"]', "correct horse battery staple")
    .click('button[type="submit"]');

  const email = await mailslurp.waitController.waitForLatestEmail({
    inboxId: inbox.id,
    timeout: 120000,
    unreadOnly: true,
  });

  const match = await mailslurp.emailController.getEmailContentMatch({
    emailId: email.id,
    contentMatchOptions: {
      pattern: "(?:verification code|OTP|code)[:\\s-]*(\\d{6})",
    },
  });

  await t
    .typeText('input[name="verificationCode"]', match.matches[1])
    .click('button[type="submit"]')
    .expect(Selector('[data-test="dashboard"]').exists)
    .ok();
});
```

## Example projects

- [MailSlurp TestCafe example](https://github.com/mailslurp/examples/tree/master/javascript-testcafe)

<div data-component="DocsExamplesList" class="docs-card-grid docs-examples-list" data-example-terms="testcafe" data-example-count="1">
<a class="docs-card docs-example-card" href="https://www.github.com/mailslurp/examples/tree/master/javascript-testcafe" target="_blank" rel="noopener noreferrer"><span class="docs-card-title">Javascript Testcafe</span><span class="docs-card-description">javascript example repository: <code>javascript-testcafe</code></span></a>
</div>

## Related docs

- [JavaScript SDK](/docs/js/)
- [Wait for methods](/docs/wait-for/)
- [Integration testing guide](/docs/testing/)