Skip to content

k6 extension that adds support for browser automation and end-to-end web testing using playwright-go

License

Notifications You must be signed in to change notification settings

LendingHome/xk6-playwright

 
 

Repository files navigation

⚠️ This is currently an alpha version

This is not supported by the k6 team, and is worked on by a(n) individual contributor(s). It may also break in the future as both xk6 and playwright-go evolve. Any issues with the tool should be raised here.

It is not production ready yet, but definitely works as intended! Please enjoy the tool!



xk6-playwright

xk6 playwright


k6 extension that adds support for browser automation and end-to-end web testing using playwright-go

Special thanks to all the contributors over at k6 and playwright-go

Here's to open source!

GitHub license Go Report Card GitHub license




Origin Story

This project was inspired by xk6-browser. Having seen the release we were excited to play around with the tool, but while using it we ran into some issues around context, page navigation, typing and button clicks. Having previously worked with playwright-go we thought it would be a great idea to create an extension around this so we had something we know would work to our liking. Thus xk6 playwright was born!

We totally understand at the time of writing this that xk6-browser is not yet production ready, and that it is currently an early beta that has been released to the public that will evolve and get better over time. However, we still saw validity in creating this extension aiming to support something we have used and know works to our liking. Competition is not intended, we just want to make cool things that help us do our jobs!


Build from source

To build a k6 binary with this extension, first ensure you have the prerequisites:

  • Go toolchain
  • Git
  • Clone the k6 repository (NOTE: make sure you are in the k6 repo base directory before attempting the below steps)

Then:

  1. Install xk6:
go install go.k6.io/xk6/cmd/xk6@latest
  1. Build the binary:
xk6 build --output xk6-playwright --with github.com/wosp-io/xk6-playwright

on Windows:

xk6 build --output xk6-playwright.exe --with github.com/wosp-io/xk6-playwright

This will create a xk6-playwright binary file in the current working directory. This file can be used exactly the same as the main k6 binary, with the addition of being able to run xk6-playwright scripts.

  1. For the tool to work, the browsers and OS dependencies must be installed locally. You can use the following command for this:
go run github.com/playwright-community/playwright-go/cmd/playwright@latest install --with-deps
  1. Run scripts that import k6/x/playwright with the new xk6-playwright binary. On Linux and macOS make sure this is done by referencing the file in the current directory, e.g. ./xk6-playwright run <script>, or you can place it somewhere in your PATH so that it can be run from anywhere on your system.

Install and Run with Docker

Install:

docker pull nickvuono/xk6-playwright

Run Test Script:

docker run --rm -i nickvuono/xk6-playwright run script.js

Make sure to pass headless args or options when launching, and set it to true when running tests using Docker


Simplest Working Example

import pw from 'k6/x/playwright';

export default function () {
  pw.launch()
  pw.newPage()
  pw.goto("https://www.google.com/", {waitUntil: 'networkidle'})
  pw.waitForSelector("input[title='Search']", {state: 'visible'})
  pw.kill()
}

Monitor Real User Metrics

import pw from 'k6/x/playwright';

export default function () {
  pw.launch()
  pw.newPage()
  pw.goto("https://www.google.com/")
  pw.waitForSelector("input[title='Search']", {state: 'visible'})
  pw.type("input[title='Search']", "how to measure real user metrics with the xk6-playwright extension for k6?")

  //print out real user metrics of the google search page
  console.log(`First Paint: ${pw.firstPaint()}ms`)
  console.log(`First Contentful Paint: ${pw.firstContentfulPaint()}ms`)
  console.log(`Time to Minimally Interactive: ${pw.timeToMinimallyInteractive()}ms`)
  console.log(`First Input Delay: ${pw.firstInputDelay()}ms`)

  pw.kill()
}

Currently Supported Actions

Playwright API coverage is as follows:

Action Encompassed Playwright Function(s) Description
launch() Run() & Launch() starts playwright client and launches Chromium browser
connect() Run() & Connect() attaches playwright client to existing browser instance
newPage() NewPage() opens up a new page within the browser
goto() Goto() navigates to a specified url
waitForSelector() WaitForSelector() waits for an element to be on the page based on the provided selector
click() Click() clicks an element on the page based on the provided selector
type() Type() types in an 'input' element on the page based on the provided selector and string to be entered
pressKey() PressKey() simulates pressing a key, types in an 'input' element on the page based on a key to be entered
sleep() Sleep() waits for a specified amount of time in milliseconds
screenshot() Screenshot() attempts to take and save a png image of the current screen
focus() Focus() focuses a spcific element based on the provided selector
fill() Fill() fills an 'input' element on the page based on the provided selector and string to be entered
selectOptions() SelectOption() selects an 'input' element from a list or dropdown of options on the page based on the provided selector and values to be selected
check() Check() checks an element on the page based on the provided selector
uncheck() Uncheck() unchecks an element on the page based on the provided selector
dragAndDrop() DragAndDrop() drag an item from one place to another based on two selectors
evaluate() Evaluate() evaluate an expresion or function and get the return value
reload() Reload() reloads the current page
cookies() Cookies() get all the cookies available for the default browser context.
firstPaint() N/A this function is unique to xk6-playwright What is First Paint? captures the first paint metric of the current page milliseconds
firstContentfulPaint() N/A this function is unique to xk6-playwright What is First Contentful Paint? captures the first contentful paint metric of the current page milliseconds
timeToMinimallyInteractive() N/A this function is unique to xk6-playwright - This is based on the first input registerd on the current page - NOTE: this is how we personally like to determine when a page is minimally interactive. captures the time to minimally interactive metric of the current page milliseconds
firstInputDelay() N/A this function is unique to xk6-playwright What is First Input Delay? captures the first input delay metric of the current page in milliseconds

The above 'Encompassed Playwright Function(s)' will link to the playwright-go package documentation to give an in-depth overview of how these functions will behave from a low-level perspective.

If you would like a high-level perspective on how these actions work you will be better served with the Playwright API Documentation


Contributing

  1. Fork it (https://github.com/your-github-user/xk6-playwright/fork)
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Contributors

Nick Vuono - creator and maintainer

About

k6 extension that adds support for browser automation and end-to-end web testing using playwright-go

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Go 94.9%
  • Dockerfile 5.1%