About Me
Fathima Harris Senior Consultant ThoughWorks™ @Fathima_Harris
NEXT-GEN FRONT END TESTING
Common
Challenges
Network Simulation
Mocking
Geolocation
Push notification
So. How do you test this manually?
<>
Dev Tools
Chrome Dev Tools Protocol
-
Allows for tools to instrument, inspect, debug and profile the browser
-
Exposes API
-
Uses Remote debugging protocol
Performance
Network
Console
Elements
Memory
Application
Security
Audit
Profiler
How to communicate with devtools?
Websocket protocol
ws client
CDP
The ws object
{
"id": 995410,
"method": "Storage.clearDataForOrigin",
"params": {
"origin":"https://framework.realtime.co",
"storageTypes": "all"
}
}
DEMO
Recap
- Start browser with remote debugging (--remote-debugging-port=9222)
- Create a websocket object
- Get the debugger url
- Make a websocket connection!
WebDriver
Client
Browsers
Drivers
WebDriver with ws connection
Browsers
ws:/debugger
CDP
DEMO
Recap
- Example with Selenium 3 - Create a websocket connection explicitly
- Example with Selenium 4 - Use DevTools library built in with Selenium 4
Alternatives
References
Next Gen Front End testing with CDP & Webdriver
By Fathima Harris
