Download to read offline
![@vibranttester | @wswebcreation
WebdriverIO - Select elements
42
Element with certain text
const header = $('h1=Welcome to my Page');
const header2 = $('h1*=Welcome');
CSS Query Selector
const elem = $('h2.subheading a');
elem.click();
Link Text
<!-- index.html -->
<a href="http://webdriver.io">WebdriverIO</a>
<h1>Welcome to my Page</h1>
// test.js
const link = $('=WebdriverIO');
console.log(link.getText()); // outputs: "WebdriverIO"
Partial Link Text
const link = $('*=driver');
console.log(link.getText()); // outputs: "WebdriverIO"
XPath
const elem = $('//BODY/P[1]');
elem.click();](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/85/Build-a-responsive-typescript-webdriverio-framework-42-320.jpg)
![@vibranttester | @wswebcreation
WebdriverIO - Select elements
43
React.JS Support
<!-- my-component.jsx -->
import React from 'react'
import ReactDOM from 'react-dom'
const MyComponent = (props) => {
const { name } = props;
const [state] = React.useState(name === 'there'
? ', how are you?' : '')
return (<div>Hello {name || 'World'}{state}</div>)
}
ReactDOM.render(
<div>
<MyComponent />
<MyComponent name="Barry"/>
<MyComponent name="WebdriverIO"/>
<MyComponent name="there"/>
</div>,
document.getElementById('#root'),
)
// test.js
const myComponent = browser.react$('MyComponent')
expect(myComponent.isDisplayed()).toBe(true) // pass
const myComponent = browser.react$('MyComponent', {name: 'WebdriverIO'})
expect(myComponent.getText()).toBe('Hello WebdriverIO') // pass
const myComponent = browser.react$('MyComponent', {}, ', how are you?')
expect(myComponent.getText()).toBe('Hello there, how are you?') // pass](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/85/Build-a-responsive-typescript-webdriverio-framework-43-320.jpg)
![@vibranttester | @wswebcreation
WebdriverIO - Select elements with Appium
44
Accessibility ID
const elem = $('~my_identifier');
elem.click();
Class Chain (iOS)
const selector = '**/XCUIElementTypeCell[`name BEGINSWITH "D"`]/**/XCUIElementTypeButton';
const Button = $(`-ios class chain:${selector}`);
Button.click();
Class Name
// iOS example
$('UIATextField').click();
// Android example
$('android.widget.DatePicker').click();
UI Automator (Android)
const selector = 'new UiSelector().text("Cancel").className("android.widget.Button")';
const Button = $(`android=${selector}`);
Button.click();](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/85/Build-a-responsive-typescript-webdriverio-framework-44-320.jpg)
![@vibranttester | @wswebcreation
WebdriverIO - Select elements
42
Element with certain text
const header = $('h1=Welcome to my Page');
const header2 = $('h1*=Welcome');
CSS Query Selector
const elem = $('h2.subheading a');
elem.click();
Link Text
<!-- index.html -->
<a href="http://webdriver.io">WebdriverIO</a>
<h1>Welcome to my Page</h1>
// test.js
const link = $('=WebdriverIO');
console.log(link.getText()); // outputs: "WebdriverIO"
Partial Link Text
const link = $('*=driver');
console.log(link.getText()); // outputs: "WebdriverIO"
XPath
const elem = $('//BODY/P[1]');
elem.click();](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/75/Build-a-responsive-typescript-webdriverio-framework-42-2048.jpg)
![@vibranttester | @wswebcreation
WebdriverIO - Select elements
43
React.JS Support
<!-- my-component.jsx -->
import React from 'react'
import ReactDOM from 'react-dom'
const MyComponent = (props) => {
const { name } = props;
const [state] = React.useState(name === 'there'
? ', how are you?' : '')
return (<div>Hello {name || 'World'}{state}</div>)
}
ReactDOM.render(
<div>
<MyComponent />
<MyComponent name="Barry"/>
<MyComponent name="WebdriverIO"/>
<MyComponent name="there"/>
</div>,
document.getElementById('#root'),
)
// test.js
const myComponent = browser.react$('MyComponent')
expect(myComponent.isDisplayed()).toBe(true) // pass
const myComponent = browser.react$('MyComponent', {name: 'WebdriverIO'})
expect(myComponent.getText()).toBe('Hello WebdriverIO') // pass
const myComponent = browser.react$('MyComponent', {}, ', how are you?')
expect(myComponent.getText()).toBe('Hello there, how are you?') // pass](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/75/Build-a-responsive-typescript-webdriverio-framework-43-2048.jpg)
![@vibranttester | @wswebcreation
WebdriverIO - Select elements with Appium
44
Accessibility ID
const elem = $('~my_identifier');
elem.click();
Class Chain (iOS)
const selector = '**/XCUIElementTypeCell[`name BEGINSWITH "D"`]/**/XCUIElementTypeButton';
const Button = $(`-ios class chain:${selector}`);
Button.click();
Class Name
// iOS example
$('UIATextField').click();
// Android example
$('android.widget.DatePicker').click();
UI Automator (Android)
const selector = 'new UiSelector().text("Cancel").className("android.widget.Button")';
const Button = $(`android=${selector}`);
Button.click();](https://image.slidesharecdn.com/buildaresponsivetypescriptwebdriverioframework-200914051750/75/Build-a-responsive-typescript-webdriverio-framework-44-2048.jpg)
Uploaded byVaruna Srivastava
Build a responsive typescript webdriverio framework
This document discusses building a responsive TypeScript framework with WebdriverIO. It covers Node.js, NPM, WebdriverIO, TypeScript, and includes a demo. Node.js is introduced as a JavaScript runtime environment based on Chrome's V8 engine. NPM is described as the package manager for Node.js projects. WebdriverIO is explained as a framework for browser and mobile automation using the WebDriver protocol. TypeScript enhances JavaScript with types and compiles to plain JavaScript. The document demonstrates selecting elements and writing tests in WebdriverIO and TypeScript.
More Related Content
Similar to Build a responsive typescript webdriverio framework
Build a responsive typescript webdriverio framework
- 1. @vibranttester | @wswebcreation Builda Responsive TypeScript WebdriverIO Framework Varuna Srivastava Lead Quality Analyst @ThoughtWorks Wim Selles Sr. Solutions Architect @Sauce Labs
- 2.
- 3.
- 4. @vibranttester | @wswebcreation Node.js- What it’s NOT! !!PROGRAMMING LANGUAGE!! 4
- 5. @vibranttester | @wswebcreation Node.js- What is it! Node is an open source cross platform runtime environment for JavaScript outside of a browser, based on Chrome’s V8 Engine. 5
- 6. @vibranttester | @wswebcreation Node.js 6 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 7. @vibranttester | @wswebcreation Node.js 7 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 8. @vibranttester | @wswebcreation Node.js 8 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps ● 2010: Express ● 2011: ○ npm 1.0 released ○ LinkedIn, Uber,.. adopt Node.js ● 2012-2014: lots of improvements ● 2015: ○ Node.js Foundation is born ○ ES6 support ○ Private modules ○ Yarn is born ● 2016-now: 📈
- 9. @vibranttester | @wswebcreation Node.js 9 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 10. @vibranttester | @wswebcreation Node.js 10 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 11. @vibranttester | @wswebcreation Node.js 11 ●Founded in 2009 ● Chrome's V8 Engine ● Node.js evolved rapidly ● Build whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 12. @vibranttester | @wswebcreation Javavs JavaScript ● Syntax ● Strongly typed versus weakly typed ● Server side compiled versus client side interpreted ● Synchronous versus asynchronous 12
- 13. @vibranttester | @wswebcreation Synchronous Handleone blocking request on a single thread. 13 Single Thread (Kitchen) Request (Table) 2 Request (Table) 1
- 14. @vibranttester | @wswebcreation Asynchronous Handlemultiple non-blocking requests on a single thread. 14 Single Thread (Kitchen) Request (Table) 2 Request (Table) 1
- 15. @vibranttester | @wswebcreation Promises 15 Apromise is an object which can be returned synchronously from an asynchronous function. It will be in one of the 3 possible states ● Pending ● Fulfilled ● Rejected
- 16. @vibranttester | @wswebcreation Promises 16 Apromise is an object which can be returned synchronously from an asynchronous function. It will be in one of the 3 possible states ● Pending ● Fulfilled ● Rejected
- 17. @vibranttester | @wswebcreation (A)synchronous 17 ●Synchronous (Java) code ● Native promises ● Multiple promises ● Async await
- 18. @vibranttester | @wswebcreation (A)synchronous 18 ●Synchronous (Java) code ● Native promises ● Multiple promises ● Async await
- 19. @vibranttester | @wswebcreation (A)synchronous 19 ●Synchronous (Java) code ● Native promises ● Multiple promises ● Async await
- 20. @vibranttester | @wswebcreation (A)synchronous 20 ●Synchronous (Java) code ● Native promises ● Multiple promises ● Async await
- 21.
- 22. @vibranttester | @wswebcreation NPM 22 NodePackage Manager: ● The website ● A command Line Interface ● A registry where all packages are stored
- 23. @vibranttester | @wswebcreation NPM 23 NodePackage Manager: ● The website ● A command Line Interface ● A registry where all packages are stored
- 24. @vibranttester | @wswebcreation NPM 24 NodePackage Manager: ● The website ● A command Line Interface ● A registry where all packages are stored
- 25. @vibranttester | @wswebcreation Package 25 Apackage is a project/collection of 1 or multiple {node_modules} which have a specific task as described in the {package.json}-file.
- 26.
- 27. @vibranttester | @wswebcreation WebDriverProtocol WebDriver is a remote control interface that enables introspection and control of user agents. 27
- 28.
- 29. @vibranttester | @wswebcreation 29 constelem = $("#myElem") elem.click() Chromedriver Geckodriver IEDriver EdgeDriver SafariDriver Appium Selendroid WebDriverAgent HTTP Selenium Grid
- 30. @vibranttester | @wswebcreation KeyFeatures Easy setup 30
- 31. @vibranttester | @wswebcreation KeyFeatures Async mode 31
- 32. @vibranttester | @wswebcreation KeyFeatures Sync mode 32
- 33. @vibranttester | @wswebcreation KeyFeatures Easy Integration 33
- 34. @vibranttester | @wswebcreation KeyFeatures Multi Remote 34 Normal Test Result Test File Multiremote Test Result ... Test File
- 35. @vibranttester | @wswebcreation KeyFeatures Online Tutorials 35
- 36. @vibranttester | @wswebcreation KeyFeatures Online Community 36
- 37. @vibranttester | @wswebcreation KeyFeatures Part of the OpenJS Foundation 37 ❤
- 38. @vibranttester | @wswebcreation WebdriverIO- 3 different tastes 38 Standalone Mode Simply consume the module as a NPM-package within a normal JS-file WDIO Testrunner Using the testrunner capabilities you can easily run tests in parallel import {remote} from ‘webdriverio’ const client = remote({ capabilities: { ... } }) $ wdio wdio.conf.js Bare Metal Mode Interface to directly talk to the underlying protocol: import WebDriver from 'webdriver' const client = await WebDriver .newSession({ capabilities: { browserName: 'firefox' } })
- 39. @vibranttester | @wswebcreation WebdriverIO- Different Test Frameworks 39
- 40. @vibranttester | @wswebcreation Plugins & Extensions 40 Reporter ●Spec ● Dot ● Allure ● JUnit ● TeamCity ● Tap ● Mochaawesome ● ... Services ● Sauce ● Appium ● Static Server ● Chromedriver ● Selenium Standalone ● Docker ● ...
- 41. @vibranttester | @wswebcreation WebdriverIO- Custom Commands 41 Great way to wrap any custom (async) logic into a command: browser.addCommand('deleteUser', (username) => { return axios.post( '/rest/v1/_test_helpers/delete_user', { user: username } ); }); browser.deleteUser('anonymous123') browser.url('/dashboard') // ...
- 42. @vibranttester | @wswebcreation WebdriverIO- Select elements 42 Element with certain text const header = $('h1=Welcome to my Page'); const header2 = $('h1*=Welcome'); CSS Query Selector const elem = $('h2.subheading a'); elem.click(); Link Text <!-- index.html --> <a href="http://webdriver.io">WebdriverIO</a> <h1>Welcome to my Page</h1> // test.js const link = $('=WebdriverIO'); console.log(link.getText()); // outputs: "WebdriverIO" Partial Link Text const link = $('*=driver'); console.log(link.getText()); // outputs: "WebdriverIO" XPath const elem = $('//BODY/P[1]'); elem.click();
- 43. @vibranttester | @wswebcreation WebdriverIO- Select elements 43 React.JS Support <!-- my-component.jsx --> import React from 'react' import ReactDOM from 'react-dom' const MyComponent = (props) => { const { name } = props; const [state] = React.useState(name === 'there' ? ', how are you?' : '') return (<div>Hello {name || 'World'}{state}</div>) } ReactDOM.render( <div> <MyComponent /> <MyComponent name="Barry"/> <MyComponent name="WebdriverIO"/> <MyComponent name="there"/> </div>, document.getElementById('#root'), ) // test.js const myComponent = browser.react$('MyComponent') expect(myComponent.isDisplayed()).toBe(true) // pass const myComponent = browser.react$('MyComponent', {name: 'WebdriverIO'}) expect(myComponent.getText()).toBe('Hello WebdriverIO') // pass const myComponent = browser.react$('MyComponent', {}, ', how are you?') expect(myComponent.getText()).toBe('Hello there, how are you?') // pass
- 44. @vibranttester | @wswebcreation WebdriverIO- Select elements with Appium 44 Accessibility ID const elem = $('~my_identifier'); elem.click(); Class Chain (iOS) const selector = '**/XCUIElementTypeCell[`name BEGINSWITH "D"`]/**/XCUIElementTypeButton'; const Button = $(`-ios class chain:${selector}`); Button.click(); Class Name // iOS example $('UIATextField').click(); // Android example $('android.widget.DatePicker').click(); UI Automator (Android) const selector = 'new UiSelector().text("Cancel").className("android.widget.Button")'; const Button = $(`android=${selector}`); Button.click();
- 45. @vibranttester | @wswebcreation Diveinto TypeScript
- 46. @vibranttester | @wswebcreation TypeScript- What is it! TypeScript is a typed superset of JavaScript that compiles to plain JavaScript 46
- 47. @vibranttester | @wswebcreation TypeScript- What is it! 47
- 48. @vibranttester | @wswebcreation TypeScript- What is it! 48 Compiled to
- 49. @vibranttester | @wswebcreation 49 ●2012: v0.8 ● 2013: ○ V0.9 released ○ Support for Generic ● 2014: ○ New compiler was released ○ 5x performance gain ● 2016: ○ Prevent variables from been assigned ○ Control flow analysis errors ● 2016-2020: 📈 ● 2020: v4.0 ○ Short circuit assignment operator ○ Speed improvements in build --no-emit TypeScript Launched in 2012
- 50. @vibranttester | @wswebcreation TypeScriptvs JavaScript ● Compile time versus Runtime error ● Strongly typed versus weakly typed ● Support modules, generic, interface versus no support 50
- 51. @vibranttester | @wswebcreation TypeScriptvs JavaScript 51 ● Runtime error vs Compile time ● Dynamic Type vs Static Type ● Interface
- 52. @vibranttester | @wswebcreation TypeScriptvs JavaScript 52 ● Runtime error vs Compile time ● Dynamic Type vs Static Type ● Interface
- 53. @vibranttester | @wswebcreation TypeScriptvs JavaScript 53 ● Runtime error vs Compile time ● Dynamic Type vs Static Type ● Interface vs no support
- 54. @vibranttester | @wswebcreation 54 GettingStarted https://github.com/varunatester/sel-workshop
- 55. @vibranttester | @wswebcreation Gettingstarted 55 ● The tsconfig.json file ● Know the Type Inference whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 56. @vibranttester | @wswebcreation Gettingstarted 56 ● The tsconfig.json file ● Know the Type Inference whatever you want ○ Complex websites ○ Mobile apps ○ Desktop apps
- 57. @vibranttester | @wswebcreation ●Quick set up ● Write a basic test ● Refactor a test using page object model ● Integrate with allure report Demo 57
- 58. @vibranttester | @wswebcreation ●https://github.com/varunatester/ sel-workshop ● https://www.typescriptlang.org/ ● https://nodejs.org/en/ References 58
- 59.