Builda responsivetypescriptwebdriverio framework

@vibranttester | @wswebcreation
Build a Responsive
TypeScript WebdriverIO
Framework
Varuna Srivastava Lead Quality Analyst @ThoughtWorks
Wim Selles Sr. Solutions Architect @Sauce Labs

Agenda
Node.js
NPM
WebdriverIO
TypeScript
Demo
2

Node.js
3

Node.js - What it’s NOT!
!!PROGRAMMING LANGUAGE!!
4

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

Node.js
6
● Founded in 2009
● Chrome's V8 Engine
● Node.js evolved rapidly
● Build whatever you want
○ Complex websites
○ Mobile apps
○ Desktop apps

Node.js
7
● Founded in 2009
○ Mobile apps
○ Desktop apps

Node.js
8
● Founded in 2009
○ 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: 📈

Node.js
9
● Founded in 2009
○ Mobile apps
○ Desktop apps

Node.js
10
● Founded in 2009
○ Mobile apps
○ Desktop apps

Node.js
11
● Founded in 2009
○ Mobile apps
○ Desktop apps

Java vs JavaScript
● Syntax
● Strongly typed versus weakly typed
● Server side compiled versus client side interpreted
● Synchronous versus asynchronous
12

Synchronous
Handle one
blocking request
on a single thread.
13
Single Thread
(Kitchen)
Request
(Table)
2
Request
(Table)
1

Asynchronous
Handle multiple non-blocking
requests
on a single thread.
14
Single Thread
(Kitchen)
Request
(Table)
2
Request
(Table)
1

Promises
15
A promise is an object which can be
returned synchronously from an
asynchronous function. It will be in
one of the 3 possible states
● Pending
● Fulﬁlled
● Rejected

Promises
16
A promise is an object which can be
returned synchronously from an
asynchronous function. It will be in
one of the 3 possible states
● Pending
● Fulﬁlled
● Rejected

(A)synchronous
17
● Synchronous (Java) code
● Native promises
● Multiple promises
● Async await

(A)synchronous
18
● Native promises
● Async await

(A)synchronous
19
● Native promises
● Async await

(A)synchronous
20
● Native promises
● Async await

NPM
21

NPM
22
Node Package Manager:
● The website
● A command Line Interface
● A registry where all packages
are stored

NPM
23
● The website
are stored

NPM
24
● The website
are stored

Package
25
A package is a project/collection
of 1 or multiple
{node_modules}
which have a speciﬁc task as
described in the
{package.json}-ﬁle.

WebdriverIO
26

WebDriver Protocol
WebDriver is a remote control interface
that enables introspection and control of
user agents.
27

28

29
const elem = $("#myElem")
elem.click()
Chromedriver
Geckodriver
IEDriver
EdgeDriver
SafariDriver
Appium
Selendroid
WebDriverAgent
HTTP
Selenium Grid

Key Features
Easy setup
30

Key Features
Async mode
31

Key Features
Sync mode
32

Key Features
Easy Integration
33

Key Features
Multi Remote
34
Normal Test
Result
Test File
Multiremote Test
Result
...
Test File

Key Features
Online Tutorials
35

Key Features
Online
Community
36

Key Features
Part of the
OpenJS
Foundation
37
❤

WebdriverIO - 3 different tastes
38
Standalone Mode
Simply consume the
module as a NPM-package
within a normal JS-ﬁle
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'
}
})

WebdriverIO - Different Test Frameworks
39

Plugins
&
Extensions
40
Reporter
● Spec
● Dot
● Allure
● JUnit
● TeamCity
● Tap
● Mochaawesome
● ...
Services
● Sauce
● Appium
● Static Server
● Chromedriver
● Selenium Standalone
● Docker
● ...

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')
// ...

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

<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();

WebdriverIO - Select elements
43
React.JS Support

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

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();

Dive into TypeScript

TypeScript - What is it!
TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript
46

47

48
Compiled to

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 ﬂow analysis errors
● 2016-2020: 📈
● 2020: v4.0
○ Short circuit assignment operator
○ Speed improvements in build
--no-emit
TypeScript
Launched
in 2012

TypeScript vs JavaScript
● Compile time versus Runtime error
● Strongly typed versus weakly typed
● Support modules, generic, interface versus no support
50

TypeScript vs
JavaScript
51
● Runtime error vs Compile time
● Dynamic Type vs Static Type
● Interface

TypeScript vs
JavaScript
52
● Interface

TypeScript vs
JavaScript
53
● Interface vs no support

54
Getting Started
https://github.com/varunatester/sel-workshop

Getting started
55
● The tsconﬁg.json ﬁle
● Know the Type Inference
whatever you want
○ Mobile apps
○ Desktop apps

Getting started
56
● The tsconﬁg.json ﬁle
● Know the Type Inference
whatever you want
○ Mobile apps
○ Desktop apps

● Quick set up
● Write a basic test
● Refactor a test using page object
model
● Integrate with allure report
Demo
57

● https://github.com/varunatester/
sel-workshop
● https://www.typescriptlang.org/
● https://nodejs.org/en/
References
58

Thank you!

Builda responsivetypescriptwebdriverio framework

More Related Content

What's hot (20)

Similar to Builda responsivetypescriptwebdriverio framework (20)

More from Wim Selles (7)

Recently uploaded (20)

Builda responsivetypescriptwebdriverio framework