Behave manners for ui testing pycon2019

Automated Web-UI Testing
with behave-manners
PyCon Ireland 2019
Panos Christeas

github.com/xrg/behave_manners
2
Who am I
●
Software Engineer (developer)
●
C, C++, PHP, Python (and more)
●
Focus on Quality of code, the “why”
●
Open source course

3
Testing shows the
presence, not the absence
of bugs
Edsger W. Dijkstra, 1969

4
Web UI need testing
●
Web UIs are all over the place
●
Nobody writes plain (nor clean) HTML
●
Complexity has exploded
(using React, Angular, Ember, etcJS)
●
Front face of product, functionality
●
They're alive!

5
Python to the rescue
Python is suitable for testing:
●
It is scripted
●
Easy, sugar-free syntax
●
Should be your choice for backend
●
Modular, easy to extend

6
Behave + ? + Selenium
Behave:
●
BDD, TDD, output formatting
+ parallel ;)
Selenium
●
Standard, industry choice
●
Defines WebDriver, all browsers support
But, middleware?

7
Example of Selenium on behave
@when('I enter my login details')
def enter_credentials(context):
context.driver.find_element_by_id('username').send_keys('test_user')
context.driver.find_element_by_id('password').send_keys('test123')
@when('I click login')
def click_login(context):
context.driver.find_element_by_xpath('/html/body/div/div/div/div/form/div[3]/button').click()
●
Doesn't scale well
●
DOM mixed with procedural code
●
Need to repeat XPaths all over; cannot test them until that step is called
●
Still broken for dynamic DOM
●
Same in other languages

8
Behave manners
●
Abstracts DOM into “components”
●
Assigns actions/methods to coms.
●
Nested model, reusable blocks
●
Split DOM parsing from step logic
●
Recursive abstraction
●
Configures browser, utilities

9
Manners architecture
<div>
<p>ActionChains:</p>
<div class= "highlight">
<pre><span class= "n">menu</span>= driver.find_element_by_css_selector(".nav")
</pre>
</div>
</div>
Target webpage DOM
<div this= "section">
<p>[title]</p>
<div class= "highlight" this= "content">
<pre>[text]
</pre>
</div>
</div>
Pagelem template DOM
Site settings
browser
base_url
site config
Page components
section
content
text="menu = driver.find..."
title="Action Chains:"
Gherkin scenario
When I visit the page
Then section title should be "Action Chains"
@then('section title should be "{expected}"')
def check_section_title(context, expected):
section = context.cur_page['section']
assert section.title == expected.rstrip(':')
Step implementation
Remote browser
Behave manners
Behave
Abstractionflow
Selenium API

10
Manners: page elements
●
HTML-like language to parse the site
●
abstract: write only as much as works
●
some advanced elements:
– repeat
– optional
– deep
– choice
●
emits “components” with “this”

11
Manners pagelems example
<html>
<body>
<div class="test-class" id="upload-area" this="upload-area">
<pe-choice>
<form this="form">
<input type="file" name="file">
<input type="submit" value="Upload" pe-name="submit">
</form>
<div class="upload-ok" this="ok">
The file has been uploaded:
</div>
<div class="payload" this="payload">
[text]
</div>
</pe-choice>
</div>

12
Manners: components
●
Python objects, mapped to remote DOM
●
Dictionaries, containing sub-components
●
Attributes from remote attributes (or const)
●
Lazy, volatile: cache them yourself
●
Suitable for behave step code
@then('I can count the lines of that table')
def count_table(context):
table = context.cur_page['content']['table']
len_rows = len(table['rows'])
if len_rows != context.num_rows:
raise CAssertionError("Table has %d rows" % len_rows, component=table)

13
First steps with behave-manners
●
Pick an environment (py2.7 is supported)
●
Install behave-manners
(note on behave==1.2.6 / parallel)
●
Install chromedriver (or geckodriver)
●
Setup initial project files
– environment.py
– config.yaml
– site/index.html
– site/some-page.html
– steps/first_steps.py
– first-test.feature
Run, rinse, repeat!

14
Manners: validator tool
●
Separates pagelems from step logic
●
Two parts: run-browser + validator
●
Repeat until template is correct
●
Interactive mode

15
Demo

16
Extra material: controllers
●
Assign methods to
components
●
Expose calculated
properties
●
Value setters, indirect
class MatInputFieldCtrl(DOMScope):
_name = "mat-input-field"
class Component(object):
@property
def value(self):
return self['input'].value
@value.setter
def value(self, val):
self['input'].value = val
@property
def error_message(self):
try:
return self['error'].message
except KeyError:
return None
class ChildComponent(object):
pass

17
PyCon

18
Where next?
●
Questions?
●
TYOP (test your own project)
●
Manners is still WIP
●
Documentation
https://behave-manners.readthedocs.io/
●
Grow, contribute
Thank you!

Behave manners for ui testing pycon2019

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Behave manners for ui testing pycon2019

Similar to Behave manners for ui testing pycon2019 (20)

Recently uploaded

Recently uploaded (20)

Behave manners for ui testing pycon2019