mailslurp-examples - playwright-sms-testing

https://github.com/mailslurp/examples

playwright-sms-testing/playwright.config.ts

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
const config: PlaywrightTestConfig = {
  testDir: './tests',
  timeout: 30 * 1000,
  expect: {
    timeout: 5000
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        headless: !!process.env.CI,
        video: 'on'
      },
    }
   ]
};

export default config;

playwright-sms-testing/package.json

{
  "name": "playwright-email-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.24.2"
  },
  "dependencies": {
    "mailslurp-client": "^15.13.1"
  }
}

playwright-sms-testing/README.md

# Email testing
See [examples repository](https://github.com/mailslurp/examples) for source.

playwright-sms-testing/Makefile

-include ../.env

.PHONY: test

node_modules:
	npm install

test: node_modules
	API_KEY=$(API_KEY) npx playwright test

sync-results:
	aws s3 cp test-results/ s3://api-spec.mailslurp.com/test-results/playwright-sms 
	aws s3 cp screenshots/ s3://api-spec.mailslurp.com/test-screenshots/playwright-sms 

playwright-sms-testing/tests/example.spec.ts

import {expect, test} from '@playwright/test';
import MailSlurp, {GetPhoneNumbersPhoneCountryEnum} from "mailslurp-client";
const formSelector = "[class^='Form__formSection']"
test.describe('test sms login with playwright', () => {
  test('can login and verify sms with mailslurp', async ({ page, browser }) => {
    // use sms enabled account
    // ensure no user exists already for number
    const apiKey = process.env.API_KEY;
    expect(apiKey).toBeDefined();

    await page.goto("https://playground-sms.mailslurp.com");
    await page.locator(formSelector).screenshot({ path: './screenshots/01-load-page.jpg' });


    //<gen>playwright_sms_start
    // load playground app
    await page.goto("https://playground-sms.mailslurp.com");
    await page.click('[data-test="sign-in-create-account-link"]');
    //</gen>
    await page.locator(formSelector).screenshot({ path: './screenshots/02-create-account.jpg' });

    //<gen>playwright_sms_phone
    // fetch a phone number in US from our account
    const mailslurp = new MailSlurp({ apiKey })
    const { content }= await mailslurp.phoneController.getPhoneNumbers({
      phoneCountry: GetPhoneNumbersPhoneCountryEnum.US
    })
    const phone = content?.[0]!!
    //</gen>

    //<gen>playwright_sms_fill_form
    const password = "test-password-123"
    // fill sign up form
    await page.fill('input[name=phone_line_number]', phone.phoneNumber.replace("+1", ""));
    await page.fill('input[name=password]', password);
    //</gen>
    await page.locator(formSelector).screenshot({ path: './screenshots/03-fill.jpg' });

    //<gen>playwright_sms_wait
    await page.click('[data-test="sign-up-create-account-button"]');
    // wait for verification code
    const sms = await mailslurp.waitController.waitForLatestSms({
      waitForSingleSmsOptions: {
        phoneNumberId: phone.id,
        unreadOnly: true,
        timeout: 30_000,
      }
    })
    // extract the confirmation code (so we can confirm the user)
    const code = /([0-9]{6})$/.exec(sms.body)?.[1]!!;
    //</gen>

    //<gen>playwright_sms_code
    // enter confirmation code
    await page.fill('[data-test="confirm-sign-up-confirmation-code-input"]', code);
    //</gen>
    await page.locator(formSelector).screenshot({ path: './screenshots/04-confirm.jpg' });
    //<gen>playwright_sms_submit
    await page.click('[data-test="confirm-sign-up-confirm-button"]');
    //</gen>
    //<gen>playwright_sms_fill_sign_in
    // fill out username (email) and password
    await page.fill('[data-test="username-input"]', phone.phoneNumber);
    await page.fill('[data-test="sign-in-password-input"]', password);
    //</gen>
    await page.locator(formSelector).screenshot({ path: './screenshots/05-sign-in.jpg' });
    //<gen>playwright_sms_greeting
    // submit
    await page.click('[data-test="sign-in-sign-in-button"]');
    await page.waitForSelector("[data-test='greetings-nav']")
    //</gen>
    // let image appear
    await page.waitForTimeout(1000)
    await page.screenshot({ path: './screenshots/06-greeting.jpg' });
  });

});