How to Break Your App with Playwright Tests

In this session, we explored setting up Playwright, an end-to-end testing tool for simulating browser interactions and running TestBox tests. Participants learned to configure Playwright for applications, simulate user interactions to stress-test forms, and handle scenarios like taking screenshots, recording sessions, capturing Chrome dev tools traces, testing login failures, and managing broken JavaScript. The session also covered using Playwright with non-ColdBox sites, providing practical insights into enhancing testing capabilities.

1. How to Break Your App
With Playwright Tests
1

2. What we will talk about today.
●What is cbPlaywright
●How to get cbPlaywright working on a Coldbox
and none Coldbox apps
●How to use cbPlaywrights basic features
●How to use some of cbPlaywrights more
advanced features
2

3. Who am I?
3
●Part time student at BC working toward a BS
in Industrial automation
●Favorite thing to do is go on Mission trips
●Learned basic C++ on YouTube
●Got hired to work for Scott at UTS

4. What is Playwright?
Playwright is a Java library made by Microsoft.
cbPlaywright is a ColdFusion wrapper for this Java library.
We can use it to do end-to-end testing!
4

5. Why not just use the Java library
Because it’s harder and I’m lazy
5

6. So what is end-to-end testing?
Normal Testing
End-to-end testing
6

7. Setting up cbPlaywright
Run the following in CommandBox
●install testbox
●install cbplaywright
7

8. Setting up cbPlaywright
Add the following to tests/Application.cfc

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

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


8

9. Setting up cbPlaywright
Run the following in CommandBox
●playwright-cli
●playwright install {{browser}}

Browsers that can be installed are:
chromium, firefox, webkit, msedge
9

10. Setting up cbPlaywright
Explicitly set the port
10

11. If cbPlaywright is not running
You may get this error on newer Macs:
bad CPU type in executable: node

To fix this run the following command:
softwareupdate --install-rosetta


11

12. Making a cbPlaywright test
component extends="cbPlaywright.models.ColdBoxPlaywrightTestCase" {
function run() {
describe( "Description", () => {
it( "can do something", () => {
Tests go here!
}
}
}
}




Go to tests/specs/integration and create a cfc
12

13. Creating a browser, context, and page
Browser
Context
Page
var browser = launchInteractiveBrowser (variables.playwright.chromium());
var context = browser.newContext();
var page = context.newPage();

var browser = launchBrowser(variables.playwright.chromium());

//This method is a shortcut for creating a browser and a context.
var page = browser.newPage();

13

14. Navigating
navigate( page, "#variables.baseUrl#/auth/index" );
waitForLoadState( page );


14

15. Now that cbPlaywright is on the page
Their is three main things we will be doing
●Selecting elements
●Interacting with elements
●Getting the value from elements
15

16. Some of the methods for selecting are…
page.getByAltText("AltText")
page.getByLabel("Label")
page.getByPlaceholder("Placeholder")
page.getByText("Text")
page.getByTitle("Title")
page.getByTestId("TestID")
locateElement(page, "input[name=username]")
getByRole(page, "link", {name: "Hello"})
page.title()
.first()
.last()
.nth(3)//zero indexed



16
<div data-testid="TestID">Text</div>

17. Some of the methods for interacting are…
element.fill("Fill Text")
element.selectOption("Option")
element.click()
element.dblclick()
element.press("ArrowLeft")
element.setChecked(true)




17

18. Some of the methods for Getting values are…
element.innerText()
element.inputValue()
element.isChecked()
element.isVisible()
expect(page.getByTestId("title").innerText()).toBe("Hello World!");
expect(page.getByTestId("random_shmamdom").isVisible()).toBeTrue();
18

19. Other useful cbPlaywright methods
page.waitForTimeout(1000);
page.waitForLoadState();
page.waitForFunction( "() => app.totalRows == 1" );





Waits
navigate( page, "#variables.baseUrl#/auth/index" );
page.reload();






Navigate
19

20. Fancy features
●Taking screenshots
●Recording video
●Tracing a context
20

21. Taking a screenshot
screenshotPage(page, "/tests/specs/screenshots/name.png" );

21

22. Recording a context
newRecordedContextForBrowser (
browser, "/tests/specs/recordings ", function(context){

});
22

23. Tracing a context
traceContext(context, "/tests/specs/traces/name.zip" , function(){

});
23

24. Convinced?
24

25. Questions?
25

26. Thank You!
26