galen framework: automation testing of responsive design

24
Responsive Design QA automation

Upload: alex-fruzenshtein

Post on 01-Jul-2015

651 views

Category:

Technology


1 download

DESCRIPTION

Presentation of new automation framework for testing of responsive design. Slides were made just as a road map for the speaker.

TRANSCRIPT

Page 1: Galen Framework: Automation testing of responsive design

Responsive DesignQA automation

Page 2: Galen Framework: Automation testing of responsive design

What is responsive design?

Page 3: Galen Framework: Automation testing of responsive design
Page 4: Galen Framework: Automation testing of responsive design

Classic QA automation of web

Page 5: Galen Framework: Automation testing of responsive design

Step #1 Step #2 Step #N

Automation flow of manual test case

Page 6: Galen Framework: Automation testing of responsive design

Automation flow of manual test case

Page 7: Galen Framework: Automation testing of responsive design

Cons & Pros

Page 8: Galen Framework: Automation testing of responsive design

1. Simplify manual QA2. Reduce testing time3. Reliable for appropriate tasks

Page 9: Galen Framework: Automation testing of responsive design

1. Can't substitute a human2. No easy ways for some actions3. Absence of complete UI

testing

Page 10: Galen Framework: Automation testing of responsive design

How to extend classic automation?

Page 11: Galen Framework: Automation testing of responsive design

Galen Framework

Page 12: Galen Framework: Automation testing of responsive design

Hello, Galen!

Page 13: Galen Framework: Automation testing of responsive design
Page 14: Galen Framework: Automation testing of responsive design

Galen Specs Language

Page 15: Galen Framework: Automation testing of responsive design

1. *.spec2. Page object definition3. @tags (desktop, mobile)4. Spec instructions

Page 16: Galen Framework: Automation testing of responsive design

Object definition

======================header id headerlogo-box css .logo-boxlogo id titlemenu css .primary-navmobile-menu id mobile-menufacebook css .facebook_url======================

Page 17: Galen Framework: Automation testing of responsive design

Tags notation

@ all

----------------------

logo

inside: header 18 to 20px top

centered horizontally inside: header

header

width: 100% of screen/width

logo-box

width: < 1201px

Page 18: Galen Framework: Automation testing of responsive design

No

tabs

just

SPA

CES

Page 19: Galen Framework: Automation testing of responsive design

Galen Test Suite Syntax

Page 20: Galen Framework: Automation testing of responsive design

@@ set

base_url http://10per.club/

@@ table devices

| device | tags | size |

| mobile | all, mobile | 320x480 |

| desktop | all, desktop | 1280x960 |

@@ parameterized using devices

MainPage on ${device} device

selenium firefox ${base_url} ${size}

check basic.spec --include "${tags}"

Page 21: Galen Framework: Automation testing of responsive design

Run tests

galen test test-suite.test --htmlreport reports

Page 22: Galen Framework: Automation testing of responsive design
Page 23: Galen Framework: Automation testing of responsive design

Galen Extra+

Page 24: Galen Framework: Automation testing of responsive design

Thanks

[email protected]@Fruzenshtein

www.Fruzenshtein.com