{"id":169,"date":"2013-05-03T15:56:45","date_gmt":"2013-05-03T15:56:45","guid":{"rendered":"http:\/\/blog.mozilla.org\/webqa\/?p=169"},"modified":"2013-05-03T15:56:45","modified_gmt":"2013-05-03T15:56:45","slug":"part-4-ui-testing-system-dialogs-are-html","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/fxtesteng\/2013\/05\/03\/part-4-ui-testing-system-dialogs-are-html\/","title":{"rendered":"Part 4: UI Testing on Firefox OS. System dialogs are HTML, too!"},"content":{"rendered":"

By Zac Campbell<\/p>\n

Greetings Gaia UI testing blog readers. If you\u2019ve come this far then you\u2019re well aware that Firefox OS\u2019s front end is an HTML operating system. This means that system prompts and dialogs like javascript.alert are written in HTML too.<\/p>\n

If you\u2019ve used Selenium you may have found that it\u2019s difficult to interact with elements that are in the browser itself, like download prompts and so forth. With Firefox OS things are different. Marionette, our test harness, lets us traverse up and down between the system and webapp. If you\u2019re familiar with the architecture of Firefox you\u2019ll know this as the browser chrome and content respectively.<\/p>\n

Fortunate, too, because in Firefox OS there are some additional system prompts like <select> boxes that are shown at the system level. The reason this is done is to present to the user a usable list of options on the small screen mobile device. You might have seen this behaviour already on iOS and Android devices if you own one.<\/p>\n

\"select_wrapper\"<\/a><\/p>\n

What\u2019s happening in this example is this;
\n1. Firefox OS\u2019s System is detecting that the user has tapped on the <select> box inside the Settings web app.
\n2. The system copies all of the options in the box and inserts them into a <ol> element at the system level.
\n3. The <ol> element is then shown to the user with the \u2018OK\u2019 box button
\n4. After the user has selected their option, Firefox OS feeds the user\u2019s selection back to the web app.<\/p>\n

To interact with this system box using Marionette we need to do some frame switching from the Settings app into the System app! I covered this in detail in part 2<\/a> of the blog series.<\/p>\n

An important point to note is that the locator for the <select> box in the web app will be different in the System app because the System app compiles its own HTML. The common links between them are the number of options and the text value of the option. Thus in our code we will locate the option using the element’s text value.<\/p>\n

The workflow for achieving this in our test is:
\n1. Switch back to the System app
\n2. Find the HTML locator for the list item
\n3. Click the list item to choose it
\n4. Find the HTML locator for the OK button
\n5. Click OK
\n6. Switch frame into the web app then resume the test steps.<\/p>\n

Here is the HTML in the system app for the example:<\/p>\n

\n
\n 
\n   Select\n <\/h1>\n\n 
    \n  \n     
  1. \n           
  2. \n           
  3. \n           
    \n# Switch back to System frame\nself.marionette.switch_to_frame()\n\n# Find the \u2018Madrid\u2019 
  4.  using an Xpath locator\n# Marionette\u2019s implicit wait will wait for Gaia to create it\nlist_item = self.marionette.find_element(\"xpath\", \n    \"\/\/section[@id='value-selector-container']\/\/li[label[span[text()='%s']]]\" % 'Madrid')\n\n# Click the list item\nlist_item.click()\n\n# Now find and click \u2018OK\u2019\nclose_button = self.marionette.find_element('css selector', 'button.value-option-confirm')\nclose_button.click()\n\n# Find and switch back to the Settings app frame\nsettings_frame = self.marionette.find_element(*settings_frame_locator)\nself.marionette.switch_to_frame(settings_frame)\n\n# OK now we\u2019re back in the Settings app the test can continue\n<\/pre>\n
    You may like to create a wrapper method for this to save yourself some duplication.<\/p>\n
    We can access all sorts of system dialogs in Firefox OS like notifications (that slide out from the status bar), app install notifications, alert boxes, lockscreens and so forth.<\/p>\n
    With Firefox OS and Marionette we have great powers to automate end-to-end testing and integration between the operating system and webapp content.<\/p>\n","protected":false},"excerpt":{"rendered":"
    By Zac Campbell Greetings Gaia UI testing blog readers. If you\u2019ve come this far then you\u2019re well aware that Firefox OS\u2019s front end is an HTML operating system. This means … Read more<\/a><\/p>\n","protected":false},"author":1359,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24660],"tags":[8630,228,4261,24660,27793],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/posts\/169"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/users\/1359"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/fxtesteng\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}