352
edits
Changes
howto subpage
= How-Tos =
== Using WebIDE to Define Locators <njpark>==
WebIDE can connect to firefox OS devices, and lets the user to view the locators of Firefox OS app. For basics of WebIDE, please refere to [https://developer.mozilla.org/en/docs/Tools/WebIDE this page].
'''Prerequisites:'''<br />
* From the phone, go to Settings -> Developer and select "ADB and DevTools" under "Debugging via USB"
* Connect the phone to PC via USB.
* From WebIDE, click 'Select Runtime' and select the phone under "USB Devices".
* From the device, allow USB connection.
* From the upper right corner, select the app that you wish to view. If no apps are shown in the list, go to Runtime -> Runtime Info drop-down menu, and click "Request Higher Privileges" button. The phone will restart, and you should be able to see all apps loaded on the phone.
<br>
'''Finding locators in Apps:'''<br />
When an app is selected from WebIDE, it will automatically open on the device as well.
Select the pick button on WebIDE, (left of inspector tab), and when the pick button is highlighted, tap the element that you wish to locate. Corresponding line would be highlighted.
* For example, if you see ''<progress id="crop-view" class="skin-dark" ...'', you can set your locator as: _locator = (By.ID, "crop-view").
* If you're looking for a sub-attribute, for example, ''data-l10n-id="back-button"'' then you can set your locator as ''_locator = (By.CSS_SELECTOR, '[data-l10n-id="back-button"]')''
The WebIDE shows the css source in real time, so you should be able to see the changes in value after UI interactions.
<br>
'''Finding locators on System level:'''<br />
Some of the dialogs or windows actually belongs to the System level, even when they are instantiated from pressing a button in an app. If tapping the UI element does not highlight the element, try switching the app to 'System' and tap it again. Remember, if you're doing this, you also have to switch to the system frame by calling self.marionette.switch_to_frame(), and switch back to the app frame once you return to the app window.
<br>
'''Finding locators in Browser:'''<br />
There is a difference between Browser and Browser Tabs. When you select Browser on WebIDE, you're checking the main view of the Browser app only. In order to check the actual content of an URL, you have to select the corresponding tab. Pick the tab listed under the 'Tab' heading at the bottom of the app list in WebIDE.
<br>
'''Caution:'''<br />
There are cases where you see it on WebIDE, but Marionette can't find them. In such case, it's usually caused by one of the following reasons:
* Marionette is on the wrong app frame
* Marionette is on the wrong shadow DOM context
* (In case of Browser) Marionette is on the wrong Search window context
== CSS Selectors ==
Use following references as guides.
* [http://www.w3.org/TR/css3-selectors/ W3]
* [http://www.cheat-sheets.org/saved-copy/Locators_table_1_0_2.pdf Locator Cheat Sheet]
== Using WebIDE to Define Locators <njpark>==
WebIDE can connect to firefox OS devices, and lets the user to view the locators of Firefox OS app. For basics of WebIDE, please refere to [https://developer.mozilla.org/en/docs/Tools/WebIDE this page].
'''Prerequisites:'''<br />
* From the phone, go to Settings -> Developer and select "ADB and DevTools" under "Debugging via USB"
* Connect the phone to PC via USB.
* From WebIDE, click 'Select Runtime' and select the phone under "USB Devices".
* From the device, allow USB connection.
* From the upper right corner, select the app that you wish to view. If no apps are shown in the list, go to Runtime -> Runtime Info drop-down menu, and click "Request Higher Privileges" button. The phone will restart, and you should be able to see all apps loaded on the phone.
<br>
'''Finding locators in Apps:'''<br />
When an app is selected from WebIDE, it will automatically open on the device as well.
Select the pick button on WebIDE, (left of inspector tab), and when the pick button is highlighted, tap the element that you wish to locate. Corresponding line would be highlighted.
* For example, if you see ''<progress id="crop-view" class="skin-dark" ...'', you can set your locator as: _locator = (By.ID, "crop-view").
* If you're looking for a sub-attribute, for example, ''data-l10n-id="back-button"'' then you can set your locator as ''_locator = (By.CSS_SELECTOR, '[data-l10n-id="back-button"]')''
The WebIDE shows the css source in real time, so you should be able to see the changes in value after UI interactions.
<br>
'''Finding locators on System level:'''<br />
Some of the dialogs or windows actually belongs to the System level, even when they are instantiated from pressing a button in an app. If tapping the UI element does not highlight the element, try switching the app to 'System' and tap it again. Remember, if you're doing this, you also have to switch to the system frame by calling self.marionette.switch_to_frame(), and switch back to the app frame once you return to the app window.
<br>
'''Finding locators in Browser:'''<br />
There is a difference between Browser and Browser Tabs. When you select Browser on WebIDE, you're checking the main view of the Browser app only. In order to check the actual content of an URL, you have to select the corresponding tab. Pick the tab listed under the 'Tab' heading at the bottom of the app list in WebIDE.
<br>
'''Caution:'''<br />
There are cases where you see it on WebIDE, but Marionette can't find them. In such case, it's usually caused by one of the following reasons:
* Marionette is on the wrong app frame
* Marionette is on the wrong shadow DOM context
* (In case of Browser) Marionette is on the wrong Search window context
== CSS Selectors ==
Use following references as guides.
* [http://www.w3.org/TR/css3-selectors/ W3]
* [http://www.cheat-sheets.org/saved-copy/Locators_table_1_0_2.pdf Locator Cheat Sheet]
