Skip to main content

WebdriverIO

Learn how to test SMS and email messages in WebdriverIO, using SMSByrd.

What is WebdriverIO?​

WebdriverIO (sometimes shortened to wdio) is a browser and mobile automation test framework for Node.js. It lets users automate any application written with modern web frameworks such as React, Angular, Polymer or Vue.js, as well as native mobile applications.

If you’re reading this, you likely already know to use WebdriverIO, however, if you are just getting started, take a look at the awesome getting started guide on the WebdriverIO website.

What is SMSByrd?​

SMSByrd is a test automation service that lets you test SMS and email messages in frameworks like WebdriverIO. Allowing you to create end-to-end tests for account creation, password reset requests, identity verification and more!

If you don’t already have one, create a free account trial now, and send an email into SMSByrd first. Once you have this working, you’re ready to start testing!

Get Started​

Installation​

Install the SMSByrd Node.js library via npm or yarn:

//code snippet

Then import the library into your code. The value for YOUR_API_KEY is covered in the next step (creating an account):

API Reference​

The Node.js library is powered by the SMSByrd email & SMS testing API. You can easily check out the API itself by looking at our API reference documentation or via our Postman or Insomnia collections:

//add buttons

Creating an account​

Create a free trial account for SMSByrd via the signup page.

Once you have this, navigate to the API tab to find the following values:

  • Project ID - Servers act like projects, which group your tests together. You need this ID whenever you interact with a server via the API.
  • Server Domain - Every server has its own domain name. You’ll need this to send email to your server.
  • API Key - You can create an API key per server (recommended), or an account-level API key to use across your whole account. Learn more about API keys.

Test email addresses with SMSByrd​

SMSByrd gives you an unlimited number of test email addresses to use with WebDriverIO - with no setup or coding required!

Here’s how it works:

  • When you create an account, you are given a server.
  • Every server has its own Server Domain name (e.g. abc123.SMSByrd.net)
  • Every server has its own Server Domain name (e.g. abc123.SMSByrd.net)
  • Any email address that ends with @YOUR_SERVER_DOMAIN will work with SMSByrd without any special setup. For example:
  • You can create more servers when you need them. Each one will have its own domain name.

Can’t use test email addresses? You can also use SMTP to test email. By connecting your product or website to SMSByrd via SMTP, SMSByrd will catch all email your application sends, regardless of the email address.

Find an email​

In automated tests you will want to wait for a new email to arrive. This library makes that easy with the messages.get method. Here’s how you use it:

//code snippet

What is this code doing?​

  1. Sets up an instance of SMSByrdClient with your API key.
  2. Waits for an email to arrive at the server with ID abc123.
  3. Performs an assertion on the subject line of the email.

My email wasn’t found​

First, check that the email you sent is visible in the SMSByrd Dashboard.

If it is, the likely reason is that by default, message.get only searches emails received by SMSByrd in the last 1 hour. You can override this behavior (see the receivedAfter option below), however we only recommend doing this during setup, as your tests will generally run faster with the default settings:

//code snippet

Find an SMS message​

Important: Trial accounts do not automatically have SMS access. Please contact our support team to enable a trial of SMS functionality.

If your account has SMS testing enabled, you can reserve phone numbers to test with, then use the SMSByrd API in a very similar way to when testing email:

//code snippet

Testing plain text content​

Most emails, and all SMS messages, should have a plain text body. SMSByrd exposes this content via the text.body property on an email or SMS message:

//code snippet

Extracting verification codes from plain text​

You may have an email or SMS message that contains an account verification code, or some other one-time passcode. You can extract content like this using a simple regex.

Here is how to extract a 6-digit numeric code:

//code snippet

Testing HTML content​

Most emails also have an HTML body, as well as the plain text content. You can access HTML content in a very similar way to plain text:

//code snippet

Working with HTML using JSDOM​

If you need to traverse the HTML content of an email. For example, finding an element via a CSS selector, you can use the JSDOM library.

//code snippet //code snippet

When an email is sent with an HTML body, SMSByrd automatically extracts any hyperlinks found within anchor and area elements and makes these available via the html.links array.

Each link has a text property, representing the display text of the hyperlink within the body, and an href property containing the target URL:

//code snippet

Important: To ensure you always have valid emails. SMSByrd only extracts links that have been correctly marked up with a or area tags.

Links in plain text (including SMS messages)​

SMSByrd auto-detects links in plain text content too, which is especially useful for SMS testing:

//code snippets

Working with attachments​

If your email includes attachments, you can access these via the attachments property:

//code snippet

Each attachment contains metadata on the file name and content type:

//code snippet

The length property returns the size of the attached file (in bytes):

//code snippet

Writing an attachment to disk​

//code snippet

Writing an attachment to disk​

The html.images property of a message contains an array of images found within the HTML content of an email. The length of this array corresponds to the number of images found within an email:

//code snippet

Remotely-hosted images​

Emails will often contain many images that are hosted elsewhere, such as on your website or product. It is recommended to check that these images are accessible by your recipients.

All images should have an alternative text description, which can be checked using the alt attribute.

//code snippet

Triggering web beacons​

A web beacon is a small image that can be used to track whether an email has been opened by a recipient.

Because a web beacon is simply another form of remotely-hosted image, you can use the src attribute to navigate to that address:

Spam checking​

You can perform a SpamAssassin check against an email. The structure returned matches the spam test object:

//code snippet