A Medley of Frontend and Backend Performance Testing

MARIE CRUZ

 

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

What is Performance Testing?

@mcruzdrake | testingwithmarie.com

Performance Testing != LOAD TESTING

@mcruzdrake | testingwithmarie.com

Performance Testing

front end/client side

back end/server side

@mcruzdrake | testingwithmarie.com

the golden rule of web performance

80-90% of the load time of a web page or application is spent in the frontend.

@mcruzdrake | testingwithmarie.com

Resource: Steve Souders

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

Resource: k6.io

tools for Performance Testing

@mcruzdrake | testingwithmarie.com

frontend

@mcruzdrake | testingwithmarie.com

backend

@mcruzdrake | testingwithmarie.com

a single tool for frontend and backend performance testing?

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

// Install xk6
go install go.k6.io/xk6/cmd/xk6@latest

// Build xk6-browser binary
xk6 build --output xk6-browser --with github.com/grafana/xk6-browser

installation

@mcruzdrake | testingwithmarie.com

import { chromium } from 'k6/x/browser';

export default function () {
  const browser = chromium.launch({ headless: false })
  const page = browser.newPage()

  page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' })

  page.close()
  browser.close()
}

simple test

@mcruzdrake | testingwithmarie.com

xk6-browser run <filename>

running a test

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

export default function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms'
  })
  const page = browser.newPage()

  page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' })

  page.locator('input[name="login"]').type('admin');
  page.locator('input[name="password"]').type('123');

  Promise.all([
    page.waitForNavigation(),
    page.locator('input[type="submit"]').click()
  ]).then(() => {
    check(page, {
      'header': page.locator('h2').textContent() == 'Welcome, admin!',
    });
  }).finally(() => {
    page.close();
    browser.close();
  })
}

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

💜

@mcruzdrake | testingwithmarie.com

import { chromium } from 'k6/x/browser'
import { check } from 'k6'
import http from 'k6/http'

export const options = {
  scenarios: {
    messages: {
      executor: 'constant-vus',
      exec: 'messages',
      vus: 1,
      duration: '10s',
    },
    news: {
      executor: 'constant-vus',
      exec: 'news',
      vus: 20,
      duration: '1m',
    },
  }
}

export function messages() {
  const browser = chromium.launch({ headless: false })
  const page = browser.newPage()

  page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' })

  page.close()
  browser.close()
}

export function news() {
  const res = http.get('https://test.k6.io/news.php')

  check(res, {
    'status is 200': (r) => r.status === 200
  });
}

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

@mcruzdrake | testingwithmarie.com

how can you help?

A Medley of Frontend and Backend Performance Testing

MARIE CRUZ

 

@mcruzdrake | testingwithmarie.com

Made with Slides.com