# WebdriverIO email and OTP testing

MailSlurp works well with WebdriverIO when WebdriverIO drives the app and the MailSlurp JavaScript SDK handles inbox creation and message retrieval. That lets you test real email OTP, magic-link, reset-password, and notification flows inside the same suite.

## 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 WebdriverIO OTP flow

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

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

describe("sign up flow", () => {
  it("verifies an email OTP", async () => {
    const inbox = await mailslurp.createInbox();

    await browser.url("https://your-app.example/sign-up");
    await $('input[name="email"]').setValue(inbox.emailAddress);
    await $('input[name="password"]').setValue("correct horse battery staple");
    await $('button[type="submit"]').click();

    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 $('input[name="verificationCode"]').setValue(match.matches[1]);
    await $('button[type="submit"]').click();

    await expect($('[data-test="dashboard"]')).toBeDisplayed();
  });
});
```

## Example projects

- [MailSlurp WebdriverIO example](https://github.com/mailslurp/examples/tree/master/javascript-webdriver-io)

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

## Related docs

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