Flow familiarization
The screen elements or objects discussed here are not only visible when you're creating a new test case but are mostly available when working with other Mesmer functions. You should be familiar with them
๐Ÿ‘
as your usage pattern in Mesmer will surely include working or dealing with them.

โ€‹
๐ŸŽž
The Steps Panel

The Steps Panel is where Mesmer lists the recorded gestures (tap, long press, or swipe) you've performed on the test device when working on your test case. Each recorded gesture is listed as a single step and represented by a screenshot. All in all, this panel is a collection of screenshots documenting the execution flow of your test case.
โ€‹
๐Ÿ‘ฉ๐Ÿซ
Note: Since Mesmer records every gesture you make, it makes sense to perform only the relevant ones to complete your test case. There's no need to tap or swipe something on your application if that action doesn't contribute to your goal. If you do, you'll end up with more screenshots than needed
๐Ÿคฆโ™€
, and the accumulation of them will affect your test case's performance during a run.
The Steps Panel can be hidden or shown. To toggle from either state, click the Show Steps or Hide Steps button.
Clicking the Show Steps button to reveal the Steps Panel
This panel also works best alongside the
๐Ÿ‘‰
Actions Panel. When working with the steps of your test case, the Steps Panel is more visual, while the Actions Panel is more detailed. Both complement each other in navigating and reviewing the various steps of your test case.
โ€‹
๐Ÿ’ก
Tip: In case you feel that your test case becomes "bloated" with screenshots because of wrong UI navigation or gesture errors, consider starting on a new slate by rebooting the test device. Rebooting wipes away all your recorded data, and you start from the beginning again. Make sure you take into account the errors you've made previously and avoid repeating them again.

โ€‹
๐Ÿ—„
The Drawer

The Drawer is the expandable and collapsable object that groups several panels altogether and is located at the right-most part of the screen. Itโ€™s collapsed by default and is almost everywhere on the Mesmer platform.
To expand the Drawer, click on the button of any of its panels. Clicking the same button again (once the Drawer has expanded) will collapse it. Clicking the Collapse Drawer button likewise does the same.
To resize the Drawer, hover your mouse cursor on the
โธ
pause-looking button and wait until your cursor changes to
โฌ…
. Then, click, hold steady and drag
โ†”
it either left or right to resize.
Expanding, collapsing, and resizing the Drawer
โ€‹
๐Ÿ‘ฉ๐Ÿซ
Note: The Collapse Drawer and the pause-looking button only appears when the Drawer has been expanded.
Now, letโ€™s discuss each panel in detail.
โ€‹
๐Ÿ‘ฉ๐Ÿซ
Note: The type and number of panels inside the Drawer vary depending on the work youโ€™re currently doing in Mesmer. The Drawer will contain different panels if youโ€™re working with the App Map as compared to when youโ€™re editing a test case.

โ€‹
โ„น
Information Panel

True to its name, this panel holds various metadata regarding your test case.
    โ€‹
    โœ
    The name of your test case.
    โ€‹
    ๐Ÿ”–
    The tags labeled or attached to your test case.
    โ€‹
    ๐Ÿ“ฑ
    The test device you chose to create the test case with.
    โ€‹
    ๐Ÿงฎ
    The number of recorded steps in your test case.
    โ€‹
    ๐Ÿ“…
    The date and time the test case was created.
    โ€‹
    โš™
    The configuration settings specified to the device.
Locating and working with the Information Panel
You can also attach or add more tags
๐Ÿ”–
to your test case in this panel. Click Add Tags and start typing the name needed to label your test case. Press the Enter or Return key to confirm your entry. You can also remove a tag by hovering over its name and clicking its
โœ–
icon.

โ€‹
โšก
Actions Panel

This panel is where most of the action is!
๐Ÿ‹
โ€‹
๐Ÿ˜„
Seriously, this is the most important panel for you if you're all about making your test case lean and mean.
๐Ÿ’ช
โ€‹
The Actions Panel is the Steps Panel's brother-in-arms when dealing with the test case's steps. While the latter depicts each step of the test case through an application screenshot, the former is detailed by indicating the type of gesture you've made and the image of the associated object it was performed upon. Depending on your action, Mesmer sometimes uses a whole application screenshot instead of an object image.
โ€‹
๐Ÿ‘ฉ๐Ÿซ
Note: Both panels, when used (or expanded) together, complement each other. The Actions Panel knows the specific gesture made to an object or UI element in the app, but it doesn't give you the whole view of your app's user interface which the Steps Panel can. Likewise, the Steps Panel isn't as detailed as the Actions Panel in telling you what specific object was gestured.
โ€‹
๐Ÿ’ก
Tip: Try expanding both the Steps Panel and Actions Panel when working or navigating the test case's steps. Notice that they sync together. If you scroll (up or down) to any test case step in the Actions Panel, its matching step is also selected in the Steps Panel. Similarly, when selecting any step from the Steps Panel, its equivalent step is also scrolled to in the Actions Panel.
How the Actions Panel and Steps Panel synchronize together
Working with the details of the test case's steps is just a part of the Actions Panel's overall function. Its main purpose is to help you author and improve the quality of your test case by providing you the means to:
    โ€‹
    ๐Ÿ“
    Write various types of assertions to verify behavior.
    โ€‹
    ๐Ÿ‘จ๐Ÿ’ป
    Encode and manage test data that you can use throughout the project or current test case.
    โ€‹
    โ—
    Associate and run a script for a specific step in the test case.
    โ€‹
    ๐Ÿ› 
    Configure options or behavior that pertain either to the test device or the test case in general.
The aforementioned functions are available in the Actions Panel's tabs. It's easy to associate each function based on the name of each tab. Most of the work you'll do involves working with these tabs, especially the +Assertion tab.
Here we discussed
๐Ÿ—ฃ
in detail the function of each tab and how to use them to build your test case
๐Ÿ‘‡
:

โ€‹
๐Ÿ“”
Device Logs

Similar to the previous two panels weโ€™ve discussed earlier, this panel, as its name also implies, lets you view the device logs. Atop of that, you can filter the logs based on their severity level and make use of options that allows you to:
    โ€‹
    ๐Ÿ”
    Filter the logs using a case-sensitive or case-insensitive string.
    โ€‹
    โ†ฉ
    Change the text wrapping of log lines.
    โ€‹
    โธ
    Pause the logs.
    โ€‹
    ๐Ÿงน
    Clear the logs or download
    โฌ‡
    them to your computer.
Locating and working with the Device Logs
With these screen elements in mind
๐Ÿ‘Š
, it's now time to do the most important part of creating a test case, which is to add an assertion.
Last modified 9mo ago