The new way to develop automated tests & beautiful tours

Public Channel / Odoo Experience 2016

By Aaron Bohy, Odoo Developer

Share on Social Networks

Share Link

Use permanent link to share in social media

Share with a friend

Please login to send this presentation by email!

Embed in your website

Select page to start with

4. Odoo v9

3. Introduction 1

6. Demo 2

7. How to write a tour? 3

11. Advanced features 4

16. Thank you. Questions? #odooexperience EXPERIENCE 2016

1. The new way to develop automated tests & tours Aaron BOHY • R&D Developer - Framework team EXPERIENCE 2016

2. Introduction 1 Demo How to write a tour? Advanced features 2 3 4

5. Introduction ● Motivation: improve user onboarding ● Notion of sequence of tips instead of isolated and unrelated tips ● Tours can be executed automatically for testing purposes ● Allow to test flows and UI ● Available in the backend, the website, the POS, iframes...

13. Helpers to write your selectors ● :containsExact( value ) ○ matches if the content of the element is exactly value ○ e.g. ‘span:containsExact(OdooExperience)’ ✔ <span>OdooExperience</span> ✘ <span>OdooExperience 2016</span> ● :containsExactCase( value ) ○ like containsExact but case sensitive ● :containsRegex( value ) ○ like containsExact but with a regular expression ● :propValueContains( value ) ○ matches if the element’s value property contains to value

8. Define and register your tour ● Define a new JS module ● Import the web_tour.tour module ● Register your tour with its name and an array of steps odoo.define( 'my_addon.tour' , function (require) { "use strict" ; var core = require( 'web.core' ); var tour = require( 'web_tour.tour' ); var _t = core._t; var steps = []; /* Array of steps **/ tour.register( 'my_tour' , steps); });

15. Put a tip on a menu ✘ Avoid poor selectors like ○ ‘.o_app:nth-child(2)’ ○ ‘.o_app:contains("CRM")’ ✓ Write a selector based on the xmlid : ○ ‘.o_app[data-menu-xmlid="sales_team.menu_base_partner"]’ <?xml version="1.0" encoding="utf-8"?> <odoo> <record id= "sales_team.menu_base_partner" model= "ir.ui.menu" > <field name= "load_xmlid" eval= "True" /> </record> </odoo> By default, menu xmlids are not loaded in the webclient ⇒ Set the flag load_xmlid to true :

9. Define your steps ● trigger (mandatory) ○ css selector of the element on which to attach the tip ● extra_trigger ○ additional css selector that must match a DOM element for the tip to be displayed ● content ○ the html content of the tip ● position ○ right (default), left, top or bottom ● width ○ default: 270px A step is an object with the following keys: var steps = [{ trigger : '.o_app[data-menu-xmlid="sales_team.menu_base_partner"]' , content : _t( "Ready to boost your sales? Your <b>sales pipeline</b> can be found here." ), position : 'bottom' , }];

12. Tour options ● url ○ the url to load before starting the tour ● skip_enabled ○ set to true to add a link to skip the tour in its tips ● test ○ set to true if the tour is dedicated to tests ● wait_for ○ a deferred that must be resolved for the tour to be ready Optional second argument with the following keys: odoo.define( 'my_addon.tour' , function (require) { "use strict" ; var tour = require( 'web_tour.tour' ); var options = {}; var steps = []; /* Array of steps **/ tour.register( 'my_tour' , options, steps); });

10. Automated tests ● Define a tests subpackage in your addon ● Test modules should have a name starting with test_ ● Import your module in tests/__init__.py ● Write a test that runs your tour from a given url, and logged in as a given user Define a python module to execute your tour with unittest: import odoo.tests @odoo.tests.common.at_install ( False ) @odoo.tests.common.post_install ( True ) class TestUi (odoo . tests . HttpCase): def test_01_my_tour ( self ): self . phantom_js( "/web" , "odoo.__DEBUG__.services['web_tour.tour'].run('my_tour')" , "odoo.__DEBUG__.services['web_tour.tour'].tours.my_tour.ready" , login = "admin" )

14. ● text( value ) ○ writes value in the element (handles select elements as well) ● click ○ clicks on the element ● drag_and_drop( to ) ○ drags and drops the element inside the element matching the given css selector ● keydown( keycodes ) ○ simulates a keydown event on the element for the given keycodes ● auto ○ default, calls click or text according to the element’s type Automatic steps: run key Or directly set a function’s prototype to perform any DOM manipulation Use some predefined helpers: Defines the operation to perform when the tour is executed automatically var steps = [{ trigger : ".o_list_editable .o_form_required input" , run : "text Ipad" , }];

Views

  • 9 Total Views
  • 0 Website Views
  • 9 Embeded Views

Actions

  • 0 Social Shares
  • 0 Likes
  • 0 Dislikes
  • 0 Comments

Share count

  • 0 Facebook
  • 0 Twitter
  • 0 LinkedIn
  • 0 Google+

Embeds 1

  • 2 onlinesync.odoo.com