![Smart Selectors
Click on a button by its text
click("Google Search")
Write into a field with default focus
write("taiko test automation")
Using proximity
click(checkbox(near("Username")))
Be specific where to locate element
write("something", into(textField({placeholder: "Username"})))
Using XPaths
click($("//input[name=`button_name`]"))
Slide 17](https://image.slidesharecdn.com/taikopresentation-190505112023/85/Taiko-Reliable-Browser-Automation-17-320.jpg)
![XHR and Dynamic Content Handling
Reduce flackiness by relying on page events rather than explicit waits
Waiting for page to load meaningful content
goto(`https://pagethatloadsdynamic.com`, {timeout: 10000,
waitForEvents: ["firstMeaningfulPaint", "firstContentfulPaint"]
})
Other options for events to wait for -
DOMContentLoaded
loadEventFired
networkAlmostIdle
networkIdle
firstPaint
firstContentfulPaint
firstMeaningfulPaint
Slide 18](https://image.slidesharecdn.com/taikopresentation-190505112023/85/Taiko-Reliable-Browser-Automation-18-320.jpg)
![Other Interesting Stu
Geolocation Mocking
overridePermissions("https://test.com/geolocation",['geolocation'])
setLocation({ latitude: 27.1752868, longitude: 78.040009, accuracy:20 })
Emulate network
emulateNetwork("WiFi")
Emulate device
emulateDevice('iPhone 6')
Set Cookies
setCookie("CSRFToken","csrfToken", {url: "http://test.com"})
Slide 20](https://image.slidesharecdn.com/taikopresentation-190505112023/85/Taiko-Reliable-Browser-Automation-20-320.jpg)
Taiko - Reliable Browser Automation
- 1. TaikoTaiko Reliable Browser AutomationReliable Browser Automation Harmeet Singh & Divya RakhianiHarmeet Singh & Divya Rakhiani Slide 1Slide 1
- 2. Harmeet Singh Senior Consultant [email protected] @ErHarmeet hrmeetsingh Divya Rakhiani Senior Consultant [email protected] rakhid Slide 2
- 3. Issues with Web Automation Slow Flaky Complicated setup Automation QAs Nightmares Stale element exception Cannot nd element Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms Slide 3
- 4. Web Automation How Selenium works Slide 4
- 5. Web Automation How ChromeDevtools works Slide 5
- 6. XHR and AJAX - Source of akiness Slide 6
- 8. Not this Taiko Slide 8
- 9. What is it then? Slide 9
- 10. What is it? Open source browser automation tool An npm library Built on Chrome DevTools API Inspired by Helium and Puppeteer Integration with test runners like Jest, Jasmine and Gauge Provides REPL Free to use and extend Slide 10
- 11. What is it? Who built it? The team behind Gauge by ThoughtWorks A growing community of Devs and QAs Slide 11
- 12. What is it? Who built it? Key features Smart selectors Ability to handle XHR and dynamic content Request/Response stubbing and mocking Interactive Recorder Slide 12
- 14. Installing globally npm install -g taiko Adding to a javascript project npm add taiko --save-dev or, if using yarn yarn add taiko --dev yarn and npm are the most widely used package managers for JavaScript Slide 14
- 15. The First Interaction Launching interactive recorder taiko Getting help regarding the APIs .api Browser actions openBrowser, closeBrowser, client, switchTo, openTab, closeTab Page actions goto, reload, title, click, doubleClick, rightClick, dragAndDrop ... Getting help on particular function .api openBrowser Launches a browser with a tab. The browser will be closed when the parent node.js process is closed. ... Slide 15
- 17. Smart Selectors Click on a button by its text click("Google Search") Write into a field with default focus write("taiko test automation") Using proximity click(checkbox(near("Username"))) Be specific where to locate element write("something", into(textField({placeholder: "Username"}))) Using XPaths click($("//input[name=`button_name`]")) Slide 17
- 18. XHR and Dynamic Content Handling Reduce flackiness by relying on page events rather than explicit waits Waiting for page to load meaningful content goto(`https://pagethatloadsdynamic.com`, {timeout: 10000, waitForEvents: ["firstMeaningfulPaint", "firstContentfulPaint"] }) Other options for events to wait for - DOMContentLoaded loadEventFired networkAlmostIdle networkIdle firstPaint firstContentfulPaint firstMeaningfulPaint Slide 18
- 19. Request Stubbing and Mocking Blocking network requests intercept("https://www.google-analytics.com/analytics.js") Redirection intercept("https://fetchdata.com", "http://fetchtestdata.com") Stubbing intercept("https://fetchdata.com", {"test": data }) Request modification intercept("https://fetchdata.com", (request) => {request.continue({"custom": "data"})})) Slide 19
- 20. Other Interesting Stu Geolocation Mocking overridePermissions("https://test.com/geolocation",['geolocation']) setLocation({ latitude: 27.1752868, longitude: 78.040009, accuracy:20 }) Emulate network emulateNetwork("WiFi") Emulate device emulateDevice('iPhone 6') Set Cookies setCookie("CSRFToken","csrfToken", {url: "http://test.com"}) Slide 20
- 21. The "Hello World" of Taiko openBrowser() goto("google.com") write("taiko test automation") click("Google Search") Getting the recorded code .code const { openBrowser, goto, write, click } = require('taiko'); (async () => { try { await openBrowser(); await goto("google.com"); await write("taiko test automation"); await click("Google Search"); } catch (e) { console.error(e); } finally { closeBrowser(); } })(); Slide 21
- 22. Installation with GaugeInstallation with Gauge Slide 22Slide 22
- 23. Free and open source test automation framework by ThoughtWorks Recommended test runner for Taiko Slide 23
- 24. Installing Gauge npm install @getgauge/cli Initializing a Taiko project gauge init js Create a Step Implementation .step("When I search for taiko", async () => { try { await openBrowser(); await goto("google.com"); await write("taiko test automation"); await click("Google Search"); } catch (e) { console.error(e); } finally { closeBrowser(); } }); Slide 24
- 25. DEMO Slide 25
- 27. Slide 27