speed up release cycles with cross browser continuous … up...android, 73.5% ios, 19.9% unknown,...

Speed up release cycles with Cross Browser Continuous Testing

▪February 2018

Speakers

2

Sheli AshkenaziProduct Management

Experitest

Tom Ben Simhon

Head of Product Experitest

Agenda

3

Speed or quality? An impossible tradeoff

Cross browser testing – the case of Responsive Web Design

How to set up a hassle free selenium testing environment

01

02

03

What is accessibility?04

7 min

5 min

20 min

5 min

Summary + Q&A05 10 min

4

I run a technology company that happens to have a bank…CEO of a leading North American bank

Source: Forrester

5

The stakes are high

Over 80% of people have stopped doing business with a company due to bad experience

Ovum

Shorter cycles = More cycles

*Same or more features in app = More regression testsMore cycles

Short release cycle side effects

6

Digital platform segmentation growing Global data, Dec 2017

7

Mobile,

52.4%

Tablet, 4.3%

Desktop,

43.2%

Platform

Windows,

82.7%OS X, 13.1%

Unknown, 1.8%Linux, 1.5% Chrome OS, 0.9%

Desktop OS

Chrome, 60.6%

Firefox,

11.0%

IE 11, 9.5%

Edge, 4.6%

Safari, 4.0%

Desktop browsers

Source: Statcounter

Samsung, 31%

Apple, 23%Others, 30%

Unknown, 7%

Huawei, 5%

Xiaomi, 4%

Mobile device vendor

Android, 73.5%

iOS, 19.9%

Unknown, 3.5%

Other, 3.0%

Mobile OS

8

Why cross browser testing

CSS behave differently in different browsers

Why cross browser testing on real devices

9

Continuous testing critical for rapid release cycles

Rapid delivery cycles rapid test cycles

Image source: Forrester

Large scale execution

Part of CI/CD pipeline and toolchain

High level of automation

Rapid result analysis and feedback

Throughout development cycle –development & test

10

Poll

Agenda

11

Speed or quality? An impossible tradeoff

Cross browser testing – the case of Responsive Web Design

How to set up a hassle free selenium testing environment

01

02

03

What is accessibility?04

7 min

5 min

20 min

5 min

Summary + Q&A05 10 min

12

Responsive Web Design (RWD) – why should you care?

27%

23%

9%

3% 3% 3% 2%2%

2%2%

24%

Browsers by version

Chrome for Android

Chrome 63.0

Safari iPhone

Firefox 57.0

UC Browser 11.5

IE 11.0

Safari iPad

Android 0

Samsung Internet 6.2

Safari 11.0

Other

13

14

Fluid grid + flexible images + media queries

Flexible Layouts: Building a website with a flexible grid that can be easily resized to any width dynamically.

Media Queries: Provide various styles for the browsers and devices based on the context, such as the orientation of the device, viewport, etc.

Flexible Media: As the size of the viewports changes, the media (images, videos etc.) also need to change their size or resolution according to the requirement.

Media query breakpoints are used to determined what is displayed on different screen sizes

How does RWD work?

15

Make decisions, manage your automation projects or solve specific issues – based on real time data and reports

Leveraging test analytics to make quality decisions

16

Agenda

17

Speed or quality? An impossible tradeoff

Cross browser testing – the case of Responsive Web Design

How to set up a hassle free selenium testing environment

01

02

03

What is accessibility?04

7 min

5 min

20 min

5 min

Summary + Q&A05 10 min

18

Agenda

19

Speed or quality? An impossible tradeoff

Cross browser testing – the case of Responsive Web Design

How to set up a hassle free selenium testing environment

01

02

03

What is accessibility?04

7 min

5 min

20 min

5 min

Summary + Q&A05 10 min

20

General principles:

• Content labels and alt labels to enable use of readers

• Proper use of color contrast

• Good use of RWD, button sizes, spacing between buttons

• Clear language and generally usability

Accessibility guidelines: a matter of regulation

Removing barriers that prevent interaction with, or access to websites, by people with disabilities.

US: Rehabilitation Act section 508

EU: WCAG 2.0

Design and development increasing take accessibility into account.

Ensuring accessibility on all elements with Object Spy

Display elements that were designed for accessibility(contain the contentDescription property in Android or accessibilityLabel under iOS).

21

Agenda

22

Speed or quality? An impossible tradeoff

Cross browser testing – the case of Responsive Web Design

How to set up a hassle free selenium testing environment

01

02

03

What is accessibility?04

7 min

5 min

20 min

5 min

Summary + Q&A05 10 min

23

• Why a high scale cross browser testing program is critical in the digital age, and how to achieve one

• The importance of responsive web design and how to test it

• Leveraging test analytics to make quality decisions and speed up fault resolution

• The importance of accessibility

• How to easily set up and run a selenium testing environment supporting a large matrix of browser versions, platforms and OS

Re-cap

24

SeeTest Continuous Testing Platform for Web & Mobile Apps

< / >

Developer

Test engineer

DevOps engineer

Any platform Any OS Any app type Any browser Any user

Test Analytics - Web & Mobile

Consolidate all of your test results for mobile and web to

gain end-to-end quality insights and drive improvements.

Grid Execution – Web & Mobile

Accelerate testing cycles and increase coverage by running

your tests in parallel on multiple browsers and

mobile devices.

Test Development

Easily and quickly develop robust automated tests for mobile applications with an enhanced version of open-

source Appium.

25

Develop and run robust and continuous automated testing for web and mobile applications

Test Automation

Questions?

27