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

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

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

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

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?

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

Includes the necessary jars
to run Playwright Java

Companion CommandBox module for downloading the
correct platform drivers

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

Unfortunately, there is more this time....

There's this thing called a driver....
Running the driver from the Playwright Java jars was
ﬁnicky
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

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 chromium
1
2
3
4
5

// 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

// tests/Application.cfc
component {
this.mappings[ "/cbPlaywright" ] = rootPath & "/modules/cbPlaywright";
}
1
2
3
4
5
6
Create a Mapping

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

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

function run() {
} );
} );
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
function run() {
3
4
5
6
7
8
9
10
} );
11
} );
12
}
13
14
}
15
Visit a Page

function run() {
it( "can perform a search on Google", () => {
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

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

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

function run() {
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

function run() {
} );
} );
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
function run() {
3
4
5
6
7
8
9
10
11
} );
12
} );
13
}
14
15
}
16
Take a Screenshot

function run() {
click(
locateElement(
page,
)
);
} );
} );
} );
}
}
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
} );
1
2
function run() {
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
click(
18
locateElement(
19
page,
20
21
)
22
);
23
24
25
26
} );
27
} );
28
}
29
30
}
31
Record a Video

function run() {
var context = browser.newContext();
traceContext( context, "/tests/results/trace.zip", function() {
click(
locateElement(
page,
)
);
} );
} );
} );
}
}
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

function run() {
click(
locateElement(
page,
)
);
} );
} );
} );
}
}
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
} );
1
function run() {
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
click(
18
locateElement(
19
page,
20
21
)
22
);
23
24
25
} );
26
27
} );
28
}
29
}
30
Save a Trace

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/setup-java@v1.4.3
with:
java-version: 11
- name: Set Up CommandBox
uses: elpete/setup-commandbox@v1.0.0
- 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 run
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
32
33
34
GitHub Actions

on:
- push
jobs:
tests:
name: Tests
steps:
with:
java-version: 11
run: box install
run: |
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
32
33
34
1
2
on:
3
- push
4
5
jobs:
6
tests:
7
8
name: Tests
9
steps:
10
11
12
13
14
15
with:
16
java-version: 11
17
18
19
20
21
22
run: box install
23
24
25
26
27
28
run: |
29
30
31
32
33
34
GitHub Actions

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

More Related Content

Similar to ITB 2023 cbPlaywright End-to-end Tests with Playwright and TestBox.pdf (20)

More from Ortus Solutions, Corp (20)

Recently uploaded (20)

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