{"id":1319,"date":"2024-02-12T18:38:01","date_gmt":"2024-02-12T14:38:01","guid":{"rendered":"https:\/\/155.212.171.134\/?p=1319"},"modified":"2024-02-19T18:54:03","modified_gmt":"2024-02-19T14:54:03","slug":"24-mobile-ui-elements-every-qa-engineer-should-know","status":"publish","type":"post","link":"https:\/\/tareev.studio\/ru\/24-mobile-ui-elements-every-qa-engineer-should-know\/","title":{"rendered":"\u0420\u0430\u0441\u0448\u0438\u0440\u044c\u0442\u0435 \u0421\u0432\u043e\u0439 \u0421\u043b\u043e\u0432\u0430\u0440\u043d\u044b\u0439 \u0417\u0430\u043f\u0430\u0441: 24 \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e UI \u041a\u043e\u0442\u043e\u0440\u044b\u0435 \u0414\u043e\u043b\u0436\u0435\u043d \u0417\u043d\u0430\u0442\u044c \u041a\u0430\u0436\u0434\u044b\u0439 QA-\u0438\u043d\u0436\u0435\u043d\u0435\u0440"},"content":{"rendered":"

A bigger button, a smaller button, a bar at the top or dots on the side….<\/p>

I’m sure you’ll agree that, after reading this, it’s hard to understand exactly what’s going on. To avoid such uncertainties when writing bug reports, let’s understand what different UI elements of the mobile application interface are called.<\/p>

\"ui<\/figure>

So, you open the application. The first thing you see is the Splash Screen<\/strong>. In other words, it is the loading screen.<\/p>\n\n

Usually, this is the image with the logo and the name of the application.<\/p><\/div><\/div>

After the loading process is complete, we can switch between the main sections. These are located on the TabBar<\/strong>, the bar at the bottom of the screen.<\/p><\/div>

\"\"<\/figure><\/div>
\"\"<\/figure>

Note the blue indicator showing you the number of unread letters; this is the Counter<\/strong>.<\/p><\/div><\/div>

Now let’s see what is located at the top of the screen.<\/p>

At the very top of the screen we see the Status Bar<\/strong>. It contains information about the device (time, network, battery level, etc.).<\/p>\n\n

Below the status bar is a toolbar with various control buttons.<\/p>\n\n

On the screenshot, you can also see the search bar with PlaceHolder<\/strong> – a text (“Search apps & gam…”) that tells you what you can enter in the bar.<\/p>\n\n

Further down are the tabs, which you can switch between.<\/p><\/div>

\"\"<\/figure><\/div>
\"\"<\/figure>

When we enter a search query, we may be offered a Suggest List<\/strong>.<\/p>\n\n

A separate item from this list is Suggest<\/strong>.<\/p><\/div><\/div>

In addition to the search bar, there may be other elements in the toolbar.<\/p>\n\n

For example, the Action Bar<\/strong> is a button in the form of three dots, which, when clicked, opens a list of available Actions<\/strong>.<\/p>\n\n

You may also see a similar button, but in the form of three horizontal bars – Hamburger<\/strong>.<\/p><\/div>

\"\"<\/figure><\/div>
\"\"<\/figure>

When working with an application, you may see a bar that pops up at the bottom of the screen – that’s Bottomsheet<\/strong>.<\/p>\n\n

This is a panel that appears on top of the existing screen and offers additional actions. In our example, you can specify filters for search in the bar.<\/p>\n\n

Several types of elements are used for these purposes:<\/p>\n\n