Skip to content

Iojjj/QA-Toolkit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

QA Toolkit

QA Toolkit is a set of tools for Software and QA Engineers to verify design implementation. It consists of two components: QA Toolkit application and QA Toolkit Bridge module. Both can be downloaded from releases page.

Application Setup

Once you install application follow instructions to configure QA Toolkit.

  1. First you need to allow app to display over other apps. Depending on Android OS version and manufacturer of your device instead of QA Toolkit application settings system might open the list of apps that can request this permission. Find QA Toolkit app and grant access.
     
    Setup Wizard, Step 1  Display over other apps settings screen

  2. Then enable QA Toolkit Accessibility Service. Once again depending on Android OS version and manufacturer of your device system may open different screen. Find list of installed (downloaded) services and click on QA Toolkit.
     
    Setup Wizard, Step 2  Accessibility settings screen
    QA Toolkit accessibility service settings screen

  3. Once you enable Accessibility Service and return back you should see a message informing that everything configured correctly. Also QA Toolkit overlay will become visible.
     
    Setup Wizard, Step 3

Toolkit Bar

Initial Toolkit Bar menu has such elements:

  1. Drag icon. It allows to drag Toolkit Bar over the screen.
    Drag icon Drag icon
  2. Inspector tool icon that launches Inspector Tool.
    Inspector Tool icon Inspector tool icon
  3. Grid tool icon that launches Grid Tool.
    Grid Tool icon Grid tool icon
  4. Ruler tool icon that launches Ruler Tool.
    Ruler Tool icon Ruler tool icon
  5. Rotate bar icon. It changes orientation of bar.
    Rotate icon Rotate icon

Inspector Tool

Inspector tool allows you to verify UI elements size and position. In advanced inspection you can also verify view attributes.

General Inspection

General inspection mode enabled by default and uses layout information available to Accessibility Service.

Once you launched Inspector Tool and selected UI element you will see its bounds, size and relative distances within parent layout.

Youtube, Android Developers channel  Inspector Tool
Inspector Tool, selected UI element

Layers

Sometimes applications might have layouts that recognized by Accessibility Service but not visible to users. They will intercept touches and block you from selecting UI elements behind them. In such cases you need to follow next steps:

  1. Click on UI element that you're interested in. Inspector Tool will select overlay (invisible) view.
  2. Cycle through hierarchy using Layer icon until required UI element is selected.

In this example Home tab was selected by clicking on it. Inspector Tool found all UI elements at touch coordinates and sort them using their z-index. The top most element is selected by default and it has a layer number 17. So to select Home tab we need to cycle through layers by clicking Layer icon. In this case Home tab has a layer number 16. Depending on layout hierarchy of inspected app you may need to click Layer icon multiple times.

Inspector Tool, selected overlay  Inspector Tool, selected Home tab

Measuring distance between elements

To inspect distances between two UI elements follow next steps:

  1. Select the first UI element.
  2. Click Pin icon to remember selected UI element.
  3. Select the seconds UI element.

After that Inspector Tool will display relative distances between edges of selected UI elements.

Inspector Tool, distances between UI elements

In case if distance equals to zero it will not be displayed.

Inspector Tool, no distances #1  Inspector Tool, no distances #2
Inspector Tool, no distances #3

Measurement units

By default sizes and distances measured in DPs (density-independent pixels) but you can also view them in PXs by clicking DP/PX icon.

DP  PX

Percentage mode

Sometimes you may need to verify that size or distance depends on device screen's width and/or height. In this case you can toggle percentage mode by clicking Percentage Mode icon. Note that this mode uses real screen size ignoring system insets such as status/navigation bars, display cutouts, etc.

Inspector Tool, percentage mode off  Inspector Tool, percentage mode on

Zoom and Pan

Sometimes UI element bounds or distances between edges are so small that they can't be displayed. For such cases you can use pinch gesture to zoom layout in or out.

Inspector Tool, zoomed out  Inspector Tool, zoomed in

Attributes Inspection

By default Accessibility Service provides few attributes that can be viewed by clicking Details icon. In General Inspection mode you'll always see a warning icon. By clicking it Inspector Tool will provide an additional information about the reason why inspectable app can be inspected in General Inspection mode.

Inspector Tool, attributes list  Inspector Tool, filtered attributes list
Inspector Tool, information message

Advanced Inspection

Advanced inspection available only for those applications that added QA Toolkit Bridge module. You can determine if advanced inspection available by checking Drag Icon. Small chain icon in the corner means that currently inspected application has QA Toolkit Bridge and can provide additional view attributes.

In the sample below you can see some preconfigured TextView and list of its attributes such as Auto Size, Shadow, Paragraph and Compound Drawables.

Inspector Tool, advanced inspection available  Inspector Tool, auto size attributes
Inspector Tool, shadow attributes  Inspector Tool, compound drawables attributes

Sometimes you may inspect views that have their own implementation of Accessibility Delegate. Usually such views draw their content on Canvas on their own so they need to provide additional information about their "virtual" children to Accessibility Service (for example, CalendarView). Such views can't be inspected even in Advanced Inspection mode. You will see a warning icon and a message explaining why.

Inspector Tool, CalendarView  Inspector Tool, selected virtual view
Inspector Tool, information message

Dimension and Color mods

Both dimension and color attributes have different display modes. By clicking an attribute you can cycle through available modes. Size dimensions (like width, height, margin, padding, etc.) can be displayed as DP or PX and font sizes as SP and PX.

Inspector Tool, font size as SP  Inspector Tool, font size as PX

Colors can be displayed as HEX string or ARGB values (both integer and float).

Inspector Tool, color as HEX  Inspector Tool, color as ARGB integer
Inspector Tool, color as ARGB float

Note: advanced inspection supports only View-based layouts. This means that Jetpack Compose layouts will have only basic information (similar to General Inspection mode).

Extending Advanced Inspection

You can add support of advanced inspection for custom or 3rd party views by implementing your own InspectorConfiguration.

Additional details TBD.

Grid Tool

Grid tool allows you to verify alignment of UI elements within a grid.

Grid Tool

You can pan grid in any direction to adjust cells position. By default cells will remain at position where you leave them, but also you can configure grid to snap cells to screen edges. To do so toggle modes for start/end and top/bottom edges using corresponding toggles in Toolkit Bar menu.

  1. Don't snap at edges (default, horizontal and vertical edges accordingly).
     
    Grid Tool, no horizontal snap Grid Tool, no horizontal snap  Grid Tool, no vertical snap Grid Tool, no vertical snap
  2. Snap horizontally (start and end edges accordingly).
     
    Grid Tool, snap at start Grid Tool, snap at start  Grid Tool, snap at end Grid Tool, snap at end
  3. Snap vertically (top and bottom edges accordingly).
     
    Grid Tool, snap at top Grid Tool, snap at top  Grid Tool, snap at bottom Grid Tool, snap at bottom

Cell Size

You can change cell size using pinch-to-zoom gesture or via settings.

Grid Tool, cell size 8dp  Grid Tool, cell size 16dp

Ruler Tool

Ruler tool allows you to check distances between multiple UI elements within a single orientation (horizontal or vertical). Note that this tool is less accurate than Inspector as rulers are not stick to UI elements' bounds. Consider using Ruler Tool for measuring distances between elements that doesn't have their own bounds (for example, line spacing in text, distance between compound drawables and text, etc.).

Ruler Tool

Measurement units

By default sizes and distances measured in DPs (density-independent pixels) but you can also view them in PXs by clicking DP/PX icon.

DP  PX

Percentage mode

Sometimes you may need to verify that size or distance depends on device screen's width and/or height. In this case you can toggle percentage mode by clicking Percentage Mode icon. Note that this mode uses real screen size ignoring system insets such as status/navigation bars, display cutouts, etc.

Ruler Tool, percentage mode off  Ruler Tool, percentage mode on

Adding and removing rulers

You can add a new ruler by clicking Plus icon. This will pin previous ruler and display a single distance to top/bottom screen edge or another ruler (depending on position of currently active ruler). To remove a ruler you can click Minus icon or press Back.

Ruler Tool, one ruler  Ruler Tool, two rulers

Position of measurements

You can change position of measurements by swiping screen. Direction of swiping depends on ruler orientation and current measurements position.

Ruler Tool, measurement position: default  Ruler Tool, measurement position: opposite

Sensitivity

You can change sensitivity of ruler sliding using pinch-to-zoom gesture or via settings.

Ruler orientation

Ruler orientation can be changed only if there is only one ruler on the screen using rotate gesture.

Ruler Tool, orientation: horizontal  Ruler Tool, orientation: vertical

Dark Mode

QA Toolkit supports dark mode according to device settings.

Dark Mode

Settings

Each mode have its own settings allowing you to configure application in the way you want. Color settings stored per light/dark mode.

Overlay Color Settings of Inspector Tool

TBD

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages