Automatic web ui testing

3kvk7

#ISKAWEBTEST

Automatic web UI testing

Using FitNesse, Selenium and Xebium

Alex van AssemRogier van het Schip

AgendaTest automationUsing Fitnesse + Xebium + Selenium

Automatic web UI testing 2

Live demos included!

Test automationWhy use test automation?

Automatic web UI testing 3

Test automation

Automatic web UI testing 4

Release 1

Sprint 1

PBI 1

PBI 2

PBI 3

Sprint 2

PBI 4

PBI 5

PBI 6

Sprint 3

PBI 7

PBI 8

PBI 9

Using Fitnesse + Xebium + SeleniumGoal– Maintainable tests

• Re-usable• Hierarchical

– Low cost tooling– Usable with limited technical knowledge– Web-UI

Automatic web UI testing 5

Testing Automation Pyramid

Automatic web UI testing 6

End-To-End

Integration

Unit

End-To-End

Integration

Unit

Flipping the Automated Testing Triangle: the Upshothttp://patrickwilsonwelsh.com/?p=32

Three levels of End-to-End test automation

Automatic web UI testing 7

RuleWorkflow

TechnicalActivity

Clarity

Stability

Three levels of UI test automation http://gojko.net/2010/04/13/how-to-implement-ui-testing-without-shooting-yourself-in-the-foot-2/

Selenium - DescriptionThe standard for Web UI testing

Selenium IDE (Firefox)– No hierarchy

Selenium Remote Control / Webdriver (C#, Java, etc)– Needs technical knowledge in C#

Automatic web UI testing 8

Selenium IDE - Demo

Automatic web UI testing 9

Automatic web UI testing 10

RuleWorkflow

TechnicalActivity

Three levels of End-to-End test automation

FitNesse - DescriptionFitNesse is a high-level acceptance testing framework– Define and run acceptance tests

FitNesse is a wiki– Easy to use

FitNesse is a web server– It requires no configuration or setup

FitNesse is plugable– Fixtures

Automatic web UI testing 11

FitNesse - Description

Automatic web UI testing 12

Testscripts c2Wmo

FitNesse - DescriptionDefine tests in tables

And more tables, see Fitnesse.org

Automatic web UI testing 13

Table Description

Decision Table Supplies the inputs and outputs for decisions.

Query Table Supplies the expected results of a query.

Script Table A series of actions and checks.

Scenario Table A table that can be called from other tables.

Fitnesse - Demo

Automatic web UI testing 14

Automatic web UI testing 15

RuleWorkflow

TechnicalActivity

Three levels of End-to-End test automation

Xebium - DescriptionFixture for FitNesse– Using FitNesse SLIM engine– Compatible with selenium 2.0 (Webdriver)

Add-on Selenium IDE– Record and replay– Export format

Automatic web UI testing 16

Xebium - Demo

Automatic web UI testing 17

FitNesse Structure

•Test scriptsTest Suites

Automatic web UI testing 18

Automatic web UI testing 19

RuleWorkflow

TechnicalActivity

Xebium

Three levels of End-to-End test automation

ImprovementsRe-usability - DRY (Don’t repeat yourself)MaintainabilityReadability

Automatic web UI testing 20

Page Objects - Definition1. (A group of) methods on a page that

1. Do something (Actions)2. Verify something (Assertions)

2. Hide technical details on how

Automatic web UI testing 21

Page Objects - Example

Automatic web UI testing 22

Menu Page Objects

Catalog Page Objects

AssertionAction

Page Objects - Example

Automatic web UI testing 23

Checkout Page Objects

AssertionAction

Page Objects - Example

Automatic web UI testing 24

Catalog Product Cart Checkout

Go to Product

Add Product to Cart

Fill personal information

Checkout Order

Set quantity of Product

Page object

Verify Product is

visible

Verify Product is not visible

Page Objects - Demo

Automatic web UI testing 25

FitNesse Structure

• Test scriptsTest Suites

• Action steps• Assertion steps

Page Objects

Automatic web UI testing 26

Automatic web UI testing 27

RuleWorkflow

TechnicalActivity

Xebium

Page Objects

Three levels of End-to-End test automation

Flow objects - DefinitionFlows over Page Object boundaries

Automatic web UI testing 28

Flow objects - Example

Automatic web UI testing 29

Catalog Product Cart Checkout

Go to Product

Add Product to Cart

Fill personal information

Checkout Order

Set quantity of Product

Page object

Flow ObjectVerify Product is

visible

Verify Product is not visible

Flow Objects - Demo

Automatic web UI testing 30

FitNesse Structure• Test ScriptsTest Suites

• Action steps• Assertion stepsPage Objects

• FlowsFlow Objects

Automatic web UI testing 31

Automatic web UI testing 32

RuleWorkflow

TechnicalActivity

Xebium

Page ObjectsFlow Objects

Three levels of End-to-End test automation

ImprovementsReadable for Business

Automatic web UI testing 33

GivenWhenThen Demo

Automatic web UI testing 34

FitNesse Structure• Test ScriptsTest Suites

• Action steps• Assertion stepsPage Objects

• FlowsFlow Objects

Automatic web UI testing 35

Automatic web UI testing 36

RuleWorkflow

TechnicalActivity

Xebium

Page ObjectsFlow Objects

Three levels of End-to-End test automation

ImprovementsMultibrowser– Internet Explorer– Firefox– Chrome

Automatic web UI testing 37

Multi browser - Demo

Automatic web UI testing 38

FitNesse Structure• Test ScriptsTest Suites

• Action steps• Assertion stepsPage Objects

• FlowsFlow Objects

• Internet Explorer• Firefox

Browser Configuraties

Automatic web UI testing 39

Automatic web UI testing 40

RuleWorkflow

TechnicalActivity

Xebium

Page ObjectsFlow Objects

Three levels of End-to-End test automation

SummaryFitNesse + Xebium + Selenium is a good combination for test automationUse Page and Flow objectsMake tests readable for business

Automatic web UI testing 41

Questions?

3kvk7

Automatic web UI testing 42