UA testing with Selenium and PHPUnit - TrueNorthPHP 2013

UA
Tes'ng
with
Selenium
and
PHPUnit
TrueNorthPHP
2013

Toronto,
Canada

Michelangelo
van
Dam
• PHP
Consultant

• President
PHPBenelux

• Conference
speaker

2

Today’s
goal
• Set
up
and
use
Selenium
IDE

• Record
UA
tests

• Convert
to
PHPUnit

• Run
con'nuously

• Mul'
browser
support
4

DISCLAIMER
SELENIUM TESTS ARE NOT A
REPLACEMENT FOR REGULAR UNIT
TESTING. THEY ONLY PROVIDE AN
ADDITIONAL SET OF TESTS FOCUSED ON
U S E R A C C E P TA N C E A N D U S E R
EXPERIENCE TESTING.
For more information about unit testing, please
see my other material on www.slideshare.net and
www.speakerdeck.com. Search for “dragonbe”!
5

“Acceptance testing is a test conducted to determine if
the requirements of a speciﬁcation or contract are met.”

!

-- source: wikipedia

7

Checklist
for
web
applica'ons

8

Func'onal
tes'ng

• Test
func'onal
requirements

-‐

e.g.
no
access
to
proﬁle
without
authen'ca'on

-‐

e.g.
buTons,
form
elements,
AJAX
controls,
…

• Test
UI
elements
on
the
web
interface

9

A
word
of
cau'on!

• UA
tests
only
test
generated
output

-‐

not
a
replacement
for
unit
tes'ng

-‐

changes
to
the
DOM
might
lead
to
failing
UAT

• UA
tests
are
heavily
depending
on
DOM

10

Selenium
to
the
rescue

12

Plugin
for
ﬁrefox

13

Get
the
plugin
(demo)

14

Let’s
get
started

16

Pick
a
test
case

17

Verify
this
issue
on
PROD

19

Run
test
to
see
it’s
ﬁxed

22

Save
your
test
as
.html

24

PHPUnit
to
the
rescue

27

The
PHPUnit
TestCase
?php
class Example extends PHPUnit_Extensions_SeleniumTestCase
{
protected function setUp()
{
$this-setBrowser(*chrome);
$this-setBrowserUrl(http://www.theialive.com/);
}

!

}
?

public function testMyTestCase()
{
$this-open(/);
$this-click(link=login);
$this-waitForPageToLoad(30000);
$this-type(id=email, dragonbe+tek13@gmail.com);
$this-type(id=password, test1234);
$this-click(id=signin);
$this-click(link=Test demo);
$this-assertEquals(Done, $this-getText(xpath=//th[5]));
$this-click(link=[EDIT]);
$this-assertTrue($this-isElementPresent(id=done));
$this-click(link=sign off);
}

29

Change
class
name
?php
class Example extends PHPUnit_Extensions_SeleniumTestCase
{
{
class MarkTaskDoneTest extends PHPUnit_Extensions_SeleniumTestCase
}

!

}
?

{
$this-open(/);
}

30

The
PHPUnit
TestCase
?php
{
{
}

!

}
?

{
$this-open(/);
{
$this-setBrowser(*iexplore);
$this-setHost('192.168.56.101');
$this-setPort(12666);
}
}

31

Meaningful
method
name
?php
{
{
$this-setBrowser(*iexplore);
$this-setHost('192.168.56.101');
$this-setPort(12666);
}

!

}
?

{
$this-open(/);
public function testMarkTestAsDone()
}

32

startSeleniumStandAlone.BAT
C:Program FilesJavajre7binjava.exe
-jar C:Jarselenium-server-standalone-2.28.0.jar
-port 12666

33

Now
run
your
tests

34

How
it
runs
on
the
node

36

Advantages
• You
can
start
tes'ng
immediately

• Even
test
“hard
to
test”
kind
of
situa'ons

• More
nodes
for
parallel
tes'ng

• Tes'ng
diﬀerent
browsers
and
plaeorms

• Con'nuous
Integra'on
possible
38

Mul'
Browser
support

40

Base
TestCase
?php

!
require_once
!

'PHPUnit/Extensions/SeleniumTestCase.php';

class TestCase extends PHPUnit_Extensions_SeleniumTestCase
{
//const TEST_HUB = '217.21.179.192';
const TEST_HUB = '192.168.56.101';
const TEST_PORT = 12666;

!
!

!
}

const USERNAME = 'dragonbe+tek13@gmail.com';
const PASSWORD = 'test1234';
const BASURL = 'http://www.theialive.com';
public static $browsers = array (
array (
'name' = 'Internet Explorer 8 on Windows 7', 'browser' = '*iexplore',
'host' = self::TEST_HUB, 'port' = self::TEST_PORT,
),
array (
'name' = 'Firefox on Windows 7', 'browser' = '*firefox',
),
array (
'name' = 'Google Chrome on Windows 7', 'browser' = '*googlechrome',
),
);
{
$this-setBrowserUrl(self::BASURL);
}

41

Base
TestCase
?php

! array (
require_once 'PHPUnit/Extensions/SeleniumTestCase.php';
!
'name' = 'Internet Explorer 8 on Windows 7',
'browser' = '*iexplore',
{
//const TEST_HUB = '217.21.179.192';
const 'host'= = self::TEST_HUB,
TEST_HUB
'192.168.56.101';
const 'port' == self::TEST_PORT,
TEST_PORT
12666;
!
), USERNAME = 'dragonbe+tek13@gmail.com';
const
!

!
}


array (
),
array (
'name' = 'Firefox on Windows 7', 'browser' = '*firefox',
),
array (
'name' = 'Google Chrome on Windows 7', 'browser' = '*googlechrome',
),
);
{
}

42

Base
TestCase
?php

!
require_once 'PHPUnit/Extensions/SeleniumTestCase.php';
!
{ array (
//const TEST_HUB = '217.21.179.192';
const 'name'= = 'Firefox on Windows 7',
TEST_HUB
'192.168.56.101';
'browser' = '*firefox',
!
const 'host'= = self::TEST_HUB,
USERNAME
'dragonbe+tek13@gmail.com';
const 'port''http://www.theialive.com';
BASURL =
= self::TEST_PORT,
! ),

!
}

);

array (
'name'
'host'
),
array (
'name'
'host'
),
array (
'name'
'host'
),

= 'Internet Explorer 8 on Windows 7', 'browser' = '*iexplore',
= self::TEST_HUB, 'port' = self::TEST_PORT,
= 'Firefox on Windows 7', 'browser' = '*firefox',
= 'Google Chrome on Windows 7', 'browser' = '*googlechrome',

{
}

43

Base
TestCase
?php

!
require_once
!


{
//const TEST_HUB = '217.21.179.192';
const TEST_HUB = '192.168.56.101';

! array (
const 'name'= = 'Google Chrome on Windows 7',
PASSWORD
'test1234';
'browser' = '*googlechrome',
!
'host' = self::TEST_HUB,
array (
'port'== self::TEST_PORT, 7', 'browser' = '*iexplore',
'name'
'Internet Explorer 8 on Windows
), ), 'host' = self::TEST_HUB, 'port' = self::TEST_PORT,

!
}

);

array (
'name'
'host'
),
array (
'name'
'host'
),

= 'Firefox on Windows 7', 'browser' = '*firefox',
= 'Google Chrome on Windows 7', 'browser' = '*googlechrome',

{
}

44

Modify
MarkTaskDoneTest

?php
/**
* Class MarkTaskDoneTest
*
* @group Selenium
*/
require_once 'TestCase.php';
class MarkTaskDoneTest extends TestCase
{
public function testMarkTestAsDone()
{
$this-open(/);
$this-type(id=email, TestCase::USERNAME);
$this-type(id=password, TestCase::PASSWORD);
}
}

Require the TestCase
and extend it

45

Benefits

• run
your
tests
on
mul'ple
browsers

• detect
flaws
in
specific
browsers
(e.g.
IE6)

-‐

adapt
your
apps
to
solve
these
flaws

48

Mul'ple
Node
Setup

49

The
GRID
• Procedure

-‐
-‐
-‐

centralized
server
(HUB)

commands
clients
(nodes)
registered

and
executes
the
tests

-‐
-‐

allow
for
automa'on

adding
clients
as
you
go

• Goal

50

Selenium
Grid
Setup
Selenium Testing
Windows HUB launches
Selenium node clients
to execute tests

CI executes tests

Windows client
NODE

Linux client
NODE
CI Server

Windows
HUB
Windows Server collects
feedback from the Citrix
client nodes and reports
back to CI Server

Mac OS X client
NODE

Continuous User Acceptance Testing

51

Star'ng
the
server
[HUB]
-role hub
-port 12666

52

Star'ng
the
client
[NODE]
-role node
-host 192.168.56.103
-port 13666
-hub http://192.168.56.101:12666/grid/register

53

Modify
Base
TestCase
?php

!
require_once
!


{
const TEST_HUB_WIN = '192.168.56.101';
const TEST_HUB_MAC = '192.168.56.1';
const TEST_HUB_LINUX = '192.168.56.102';

!
!

!
}

array (
'host' = self::TEST_HUB_WIN, 'port' = self::TEST_PORT,
),
array (
'name' = 'Firefox on Mac OS X', 'browser' = '*firefox',
'host' = self::TEST_HUB_MAC, 'port' = self::TEST_PORT,
),
array (
'name' = 'Google Chrome on Linux', 'browser' = '*googlechrome',
'host' = self::TEST_HUB_LINUX, 'port' = self::TEST_PORT,
),
);
{
}

56

phpunit.de
http://www.phpunit.de/manual/3.5/en/selenium.html

59

Credits
• michelangelo:
hTp://www.flickr.com/photos/akrabat/

8784318813

• apple
store:
hTp://www.flickr.com/photos/jtjdt/3571748777

• checklist:
hTp://www.flickr.com/photos/alancleaver/4439276478

• flat
're:
hTp://www.flickr.com/photos/anijdam/2468493546/

• first
place:
hTp://www.flickr.com/photos/evelynishere/
3417340248/

• gears:
hTp://www.flickr.com/photos/wwarby/4782904694

• steps:
hTp://www.flickr.com/photos/ben_salter/1407168763

• browsers:
hTp://www.flickr.com/photos/richoz/3791167457

• informa'on:
hTp://www.flickr.com/photos/twicepix/
2650241408/

• elephpant:
hTp://www.flickr.com/photos/drewm/3191872515
60

Contact
Michelangelo van Dam
Zend Certiﬁed Engineer

!

email: michelangelo@in2it.be

Contact us for

Consultancy - Training - QA - Webdesign

61

UA testing with Selenium and PHPUnit - TrueNorthPHP 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to UA testing with Selenium and PHPUnit - TrueNorthPHP 2013

Similar to UA testing with Selenium and PHPUnit - TrueNorthPHP 2013 (20)

More from Michelangelo van Dam

More from Michelangelo van Dam (20)

Recently uploaded

Recently uploaded (20)

UA testing with Selenium and PHPUnit - TrueNorthPHP 2013