E2E test -------------jest-puppe

Pre-Install

• git
• nodejs

🖥 Tech stack

• jest-puppeteer

🔗 Links

• jest-puppeteer
• jest-puppeteer
• puppeteer

✨ Tests

📦 Install

# First of all, make sure you have permissions and clone from Bitbucket

# After git clone
cd learning-store-web
# currently, this project is placed in learning-store-web - feature/e2e branch
git checkout -b 项目
npm install

🔨 Usage

# Run unit testing
npm run test
# Run unit testing with watching
npm run test:watch

How to write a puppeteer test?

Here are some common API

// Visit 'https://devportal.prometheanproduct.com'
await page.goto('https://devportal.xxxx.com')
// Create a screenshot file
await page.screenshot({path: 'example.png'});
// page.evaluate(fn), In fn, you can get dom object and return useful text information or something else.
const text = await page.evaluate(() => document.querySelector('.welcome').textContent)
// Runs document.querySelector
const Input = await page.$('input[name=email]')
// Waiting 10000 ms.
await page.waitFor(10000)
// Find a input first and input something in it.
const Input = await page.$('input[name=email]')
Input.type('yourEmail@gmail.com')
// Click a button
const button = await page.$('button[type=submit]')
await button.click()

Not what you want? Visit Puppeteer document

How to use jest?

describe('describe groups together several related tests', () => {
  test('A test',()=> {
    //...
  })
  test('Another test',()=> {
    //...
  })
  test('Async test', async()=> {
    const page = page.goto('https://www.google.com')
    expect(page).toBeTruthy()
  })
  describe('',() =>{
    test.only('When debugging, Only want to run a subset of test',() => {
      //...
    })
    test.todo('Use for planning on writing tests.')
    test.skip('Use when this test is difficult to fixed, you want to skip and make sure all tests are passed',() => {})
  })
})

More information in jest

To make test simpler, expect-puppeteer API add some specific matchers if you make expectation on a Puppeteer Page.

  page.toClick
  page.toDisplayDialog
  page.toFill
  page.toFillForm
  page.toMatch
  page.toMatchElement
  page.toSelect
  page.toUploadFile