ITB 2023 cbPlaywright End-to-end Tests with Playwright and TestBox - Eric Petersen.pdf

Playwright is Microsoft's end-to-end testing tool, similar to Selenium and Cypress. It offers a Java SDK for integration with TestBox tests. This session will teach you to use Playwright and TestBox for website testing. It's suitable for both testing beginners and experienced developers, as browser testing is an intuitive and comprehensive way to start testing applications.

2. https://slides.com/elpete/itb2023-cbplaywright

3. What this talk is
An overview of cbPlaywright
An overview of Playwright Java
How to use the companion
CommandBox library
A few end-to-end testing selector
strategies
Live coding cbPlaywright tests

4. What this talk isn't
About unit, integration, or any other
kind of testing besides end-to-end (or
browser) tests
Comparison to other end-to-end
testing tools
Deep dive into end-to-end testing best
practices

6. What is
cbPlaywright?

7. Includes the necessary jars and drivers to run
Playwright Java
Provides integration with TestBox and ColdBox
tests
Helper methods for making interacting with
Playwright Java easier
What is cbPlaywright?

8. So...what is
Playwright?

9. CFML

10. If Playwright Java
exists...why would I
use cbPlaywright?

11. Includes the necessary jars
to run Playwright Java

12. Companion CommandBo x module for downloading the
correct platform drivers

13. Helper functions to turn this....
var screenshotOptions = createObject( "java", "com.microsoft.playwright.Page$ScreenshotOptions" ).init();
var screenshotPath = createObject( "java", "java.nio.file.Paths" ).get(
javacast( "String", expandPath( "/tests/results/screenshotOne.png" ) ), javacast( "String[]", [] )
);
screenshotOptions.setPath( screenshotPath );
page.screenshot( screenshotOptions );1 2 3 4 5 6
...into this
screenshotPage( page, "/tests/results/screenshotOne.png" );1

14. Installation

15. box install cbPlaywright

16. Unfortunately, there is more this time....

17. There's this thing called a driver....
Running the driver from the Playwright Java jars was
finicky
The driver-bundle jar is very large (about 200 MB
unzipped)
The driver-bundle included versions for all the
platforms
You ended up downloading a full driver-bundle for
every cbPlaywright installation.
Interacting with the driver CLI was a pain

18. CommandBox cbPlaywright

19. CommandBox cbPlaywright
Installs as a dependency of cbPlaywright
Manages installing the correct driver for your
platform
Automatically downloads a driver on install
Provides a passthrough to the Playwright CLI
# Install the Playwright driver
cbplaywright driver install

# Install Chromium as a test browser
playwright install chromium1 2 3 4 5

20. Configuration

21. // tests/Application.cfc
component {

this.javaSettings = {
loadPaths: directoryList(
rootPath & "modules/cbPlaywright/lib" ,
true,
"array",
"*jar"
),
loadColdFusionClassPath : true,
reloadOnChange: false
};

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Add the Jar Paths

22. // tests/Application.cfc
component {

this.mappings[ "/cbPlaywright" ] = rootPath & "/modules/cbPlaywright" ;

}1 2 3 4 5 6
Create a Mapping

23. // .env
CBPLAYWRIGHT_DRIVER_DIR=/path/to/driver/directory1 2
Set the Driver Path
(OPTIONAL)

24. Usage

25. Creating a Test

26. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
// ...
}

}1 2 3 4 5 6 7
Extend the Playwright Test Case
component extends="cbPlaywright.models.ColdBoxPlaywrightTestCase" {

function run() {
// ...
}

}1 2 3 4 5 6 7

27. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Visit a Page

28. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var browser = launchBrowser( variables.playwright.chromium() );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15
Visit a Page

29. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var browser = launchBrowser( variables.playwright.chromium() );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 var page = browser.newPage();component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15
Visit a Page

30. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var browser = launchBrowser( variables.playwright.chromium() );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 var page = browser.newPage();component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 navigate( page, "https://google.com" );
waitForLoadState( page );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 var page = browser.newPage();7 8 9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15
Visit a Page

31. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var browser = launchBrowser( variables.playwright.chromium() );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 var page = browser.newPage();component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 navigate( page, "https://google.com" );
waitForLoadState( page );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 var page = browser.newPage();7 8 9 expect( page.title() ).toBe( "Google" );10 } );11 } );12 }13 14 }15 expect( page.title() ).toBe( "Google" );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 10 } );11 } );12 }13 14 }15
Visit a Page

32. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can perform a search on Google" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Fill Out a Form

33. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can perform a search on Google" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can perform a search on Google" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 10 11 12 13 14 15 } );16 } );17 }18 19 }20
Fill Out a Form

34. What makes a
good Selector?

35. Role
Label Text
Placeholder Text
Text
Display Value
What makes a good Selector?
https://testing-library.com/docs/queries/about
1. Queries Accessible
to Everyone
2. Semantic Queries 3. Test IDs
Alt Text
Title

36. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
screenshotPage( page, "/tests/results/homepage.png" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Take a Screenshot

37. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "can visit the Google homepage" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var page = browser.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );
expect( page.title() ).toBe( "Google" );
screenshotPage( page, "/tests/results/homepage.png" );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 screenshotPage( page, "/tests/results/homepage.png" );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "can visit the Google homepage" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 var page = browser.newPage();7 navigate( page, "https://google.com" );8 waitForLoadState( page );9 expect( page.title() ).toBe( "Google" );10 11 } );12 } );13 }14 15 }16
Take a Screenshot

38. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "fill out the search form and click a link" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
var page = context.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );

click(
locateElement(
page,
"text=Playwright: Fast and reliable end-to-end testing for modern ..."
)
);

waitForUrl( page, "https://playwright.dev/" );
} );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Record a Video

39. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "fill out the search form and click a link" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
var page = context.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );

click(
locateElement(
page,
"text=Playwright: Fast and reliable end-to-end testing for modern ..."
)
);

waitForUrl( page, "https://playwright.dev/" );
} );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
} );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "fill out the search form and click a link" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 var page = context.newPage();8 navigate( page, "https://google.com" );9 waitForLoadState( page );10 11 var searchBox = locateElement( page, '[aria-label="Search"]' );12 fill( searchBox, "playwright" );13 press( searchBox, "Enter" );14 15 expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );16 17 click(18 locateElement(19 page,20 "text=Playwright: Fast and reliable end-to-end testing for modern ..."21 )22 );23 24 waitForUrl( page, "https://playwright.dev/" );25 26 } );27 } );28 }29 30 }31
Record a Video

40. component extends="cbPlaywright.models.PlaywrightTestCase" {

function run() {
describe( "Playwright Tests", () => {
it( "fill out the search form and click a link" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
var page = context.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );

click(
locateElement(
page,
"text=Playwright: Fast and reliable end-to-end testing for modern ..."
)
);

waitForUrl( page, "https://playwright.dev/" );
} );
} );
} );
}

}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
} );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "fill out the search form and click a link" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 var page = context.newPage();8 navigate( page, "https://google.com" );9 waitForLoadState( page );10 11 var searchBox = locateElement( page, '[aria-label="Search"]' );12 fill( searchBox, "playwright" );13 press( searchBox, "Enter" );14 15 expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );16 17 click(18 locateElement(19 page,20 "text=Playwright: Fast and reliable end-to-end testing for modern ..."21 )22 );23 24 waitForUrl( page, "https://playwright.dev/" );25 26 } );27 } );28 }29 30 }31 newRecordedContextForBrowser( browser, "/tests/results/videos" , ( context ) => {
var page = context.newPage();
} );component extends="cbPlaywright.models.PlaywrightTestCase" {1 2 function run() {3 describe( "Playwright Tests", () => {4 it( "fill out the search form and click a link" , () => {5 var browser = launchBrowser( variables.playwright.chromium() );6 7 8 navigate( page, "https://google.com" );9 waitForLoadState( page );10 11 var searchBox = locateElement( page, '[aria-label="Search"]' );12 fill( searchBox, "playwright" );13 press( searchBox, "Enter" );14 15 expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );16 17 click(18 locateElement(19 page,20 "text=Playwright: Fast and reliable end-to-end testing for modern ..."21 )22 );23 24 waitForUrl( page, "https://playwright.dev/" );25 26 } );27 } );28 }29 30 }31
Record a Video

41. component extends="cbPlaywright.models.PlaywrightTestCase" {
function run() {
describe( "Playwright Tests", () => {
it( "fill out the search form and click a link" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var context = browser.newContext();
traceContext( context, "/tests/results/trace.zip" , function() {
var page = context.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );

click(
locateElement(
page,
"text=Playwright: Fast and reliable end-to-end testing for modern ..."
)
);

waitForUrl( page, "https://playwright.dev/" );
} );
} );
} );
}
}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Save a Trace

42. component extends="cbPlaywright.models.PlaywrightTestCase" {
function run() {
describe( "Playwright Tests", () => {
it( "fill out the search form and click a link" , () => {
var browser = launchBrowser( variables.playwright.chromium() );
var context = browser.newContext();
traceContext( context, "/tests/results/trace.zip" , function() {
var page = context.newPage();
navigate( page, "https://google.com" );
waitForLoadState( page );

var searchBox = locateElement( page, '[aria-label="Search"]' );
fill( searchBox, "playwright" );
press( searchBox, "Enter" );

expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );

click(
locateElement(
page,
"text=Playwright: Fast and reliable end-to-end testing for modern ..."
)
);

waitForUrl( page, "https://playwright.dev/" );
} );
} );
} );
}
}1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var page = context.newPage();
} );component extends="cbPlaywright.models.PlaywrightTestCase" {1 function run() {2 describe( "Playwright Tests", () => {3 it( "fill out the search form and click a link" , () => {4 var browser = launchBrowser( variables.playwright.chromium() );5 var context = browser.newContext();6 traceContext( context, "/tests/results/trace.zip" , function() {7 8 navigate( page, "https://google.com" );9 waitForLoadState( page );10 11 var searchBox = locateElement( page, '[aria-label="Search"]' );12 fill( searchBox, "playwright" );13 press( searchBox, "Enter" );14 15 expect( page.url() ).toInclude( "https://www.google.com/search?q=playwright" );16 17 click(18 locateElement(19 page,20 "text=Playwright: Fast and reliable end-to-end testing for modern ..."21 )22 );23 24 waitForUrl( page, "https://playwright.dev/" );25 } );26 27 } );28 }29 }30
Save a Trace

43. Save a Trace

44. Demo

45. Bonus

46. name: PRs and Branches

on:
- push

jobs:
tests:
runs-on: ubuntu-latest
name: Tests
steps:
- name: Checkout Repository
uses: actions/checkout@v2

- name: Setup Java JDK
uses: actions/[email protected]
with:
java-version: 11

- name: Set Up CommandBox
uses: elpete/[email protected]

- name: Install dependencies
run: box install

- name: Start server
run: box server start

- name: Install Playwright dependencies
run: |
box playwright-cli install-deps
box playwright-cli install chromium

- name: Run TestBox Tests
run: box testbox run1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
GitHub Actions

47. name: PRs and Branches

on:
- push

jobs:
tests:
runs-on: ubuntu-latest
name: Tests
steps:
- name: Checkout Repository
uses: actions/checkout@v2

- name: Setup Java JDK
uses: actions/[email protected]
with:
java-version: 11

- name: Set Up CommandBox
uses: elpete/[email protected]

- name: Install dependencies
run: box install

- name: Start server
run: box server start

- name: Install Playwright dependencies
run: |
box playwright-cli install-deps
box playwright-cli install chromium

- name: Run TestBox Tests
run: box testbox run1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 - name: Checkout Repositoryname: PRs and Branches1 2 on:3 - push4 5 jobs:6 tests:7 runs-on: ubuntu-latest8 name: Tests9 steps:10 11 uses: actions/checkout@v212 13 - name: Setup Java JDK14 uses: actions/[email protected] with:16 java-version: 1117 18 - name: Set Up CommandBox19 uses: elpete/[email protected] 21 - name: Install dependencies22 run: box install23 24 - name: Start server25 run: box server start26 27 - name: Install Playwright dependencies28 run: |29 box playwright-cli install-deps30 box playwright-cli install chromium31 32 - name: Run TestBox Tests33 run: box testbox run34
GitHub Actions