Example Puppeteer e2e tests from Ropig

index.test.js

import faker from 'faker'
import puppeteer from 'puppeteer'

const appUrlBase = 'http://localhost:4000'
const routes = {
  public: {
    register: `${appUrlBase}/register`,
    login: `${appUrlBase}/login`,
    noMatch: `${appUrlBase}/asdf`,
  },
  private: {
    events: appUrlBase,
    alerts: `${appUrlBase}/alerts`,
    services: `${appUrlBase}/services`,
    team: `${appUrlBase}/team`,
  },
  admin: {
    templates: `${appUrlBase}/templates`,
  },
}

const user = {
  email: faker.internet.email(),
  password: 'test',
  firstName: faker.name.firstName(),
  lastName: faker.name.lastName(),
  mobile: faker.phone.phoneNumber(),
  companyName: faker.company.companyName(),
}

let browser
let page
beforeAll(async () => {
  browser = await puppeteer.launch(
    process.env.DEBUG
      ? {
          headless: false,
          slowMo: 100,
        }
      : {}
  )
  page = await browser.newPage()
})

describe('private routes', () => {
  test('redirects to login route when logged out', async () => {
    await page.goto(routes.private.events)
    await page.waitForSelector('[data-testId="userLoginForm"]')
  })
})

describe('registration', () => {
  test('can get to register route from login form', async () => {
    await page.click('[data-testId="registerLink"]')
    await page.waitForSelector('[data-testId="userAccountForm"]')
  })

  test('can create new user account', async () => {
    await page.goto(routes.public.register)
    await page.waitForSelector('[data-testId="userAccountForm"]')
    await page.click('[data-testId="userRegisterInputWithEmail"]')
    await page.type(user.email)
    await page.click('[data-testId="userRegisterInputWithPassword"]')
    await page.type(user.password)
    await page.click('[data-testId="userAccountSubmitButton"]')
    await page.waitForSelector('[data-testId="userSettingsForm"]')
  })

  test('logs in and redirects to events route when registration is complete', async () => {
    await page.waitForSelector('[data-testId="events"]')
  })
})

describe('logout', () => {
  test('can logout', async () => {
    await page.waitForSelector('[data-testId="userMenuButton"]')
    await page.click('[data-testId="userMenuButton"]')
    await page.waitForSelector('[data-testId="userMenuOpen"]')
    await page.click('[data-testId="logoutLink"]')
    await page.waitForSelector('[data-testId="userLoginForm"]')
  })
})

describe('login', () => {
  test('can login', async () => {
    await page.waitForSelector('[data-testId="userLoginInputWithEmail"]')
    await page.click('[data-testId="userLoginInputWithEmail"]')
    await page.type(user.email)
    await page.click('[data-testId="userLoginInputWithPassword"]')
    await page.type(user.password)
    await page.click('[data-testId="userLoginSubmitButton"]')
    await page.waitForSelector('[data-testId="events"]')
  })
})

describe('on call', () => {
  test('starts off call', async () => {
    await page.waitForSelector('[data-testId="offCallStatus"]')
  })

  test('can toggle on call status', async () => {
    await page.click('[data-testId="onCallButton"]')
    await page.waitForSelector('[data-testId="onCallStatus"]')
  })

  test('shows on call list with alerts', async () => {
    await page.goto(routes.private.alerts)
    await page.waitForSelector('[data-testId="someOnCallButton"]')
    await page.click('[data-testId="someOnCallButton"]')
    await page.waitForSelector('[data-testId="onCallBadge"]')
  })

  test('shows on call badge in team list', async () => {
    await page.goto(routes.private.team)
    await page.waitForSelector('[data-testId="onCallBadge"]')
  })
})

describe('errors', () => {
  test(`shows 404 message when route doesn't exist`, async () => {
    await page.goto(routes.public.noMatch)
    await page.waitForSelector('[data-testId="noMatch"]')
  })
})

describe('admin', () => {
  test('redirects to root route when not an admin', async () => {
    await page.goto(routes.admin.templates)
    await page.waitForSelector('[data-testId="events"]')
  })
})

afterAll(() => {
  if (!process.env.DEBUG) {
    browser.close()
  }
})