How to find elements on XCUITest
This is the fourth in a series of blog posts where I share what Ive learned about XCUITest and how to get started with it.
Before you start
If you have Xcode already setup to create some UI tests, awesome! Otherwise, please take a look at the third post in the series to get you ready for what I’m going to share below :)
UI tests in a nutshell
If you think about automating UI tests, in a very simple way. In that case, it's nothing more than being able to find elements on the screen of the app, interact with them and finally assert if what happened is what was supposed to happen.
Finding elements in XCUITest
Our main quest as part of automating UI tests is trying to find elements on the screen. On XCUITest, there are three main ways of finding them: UI Test Recorder, Accessibility Inspector and debugging using po.
UI Test Recorder
The test recorder is the best one if you're starting! If you have no idea yet what are the usual elements on the screen of an iOS app, what they look like and how to access them, UI Test Recorder will be your friend.
How to use it:
1 — Click inside a test
2 — Click on the red circle on the bottom of the code
3 — Tap around in the simulator, you'll notice that code is being generated on your test
4 — Stop the recording by clicking on the same button used to start
Accessibility Inspector
The Accessibility Inspector is quite good as well, very helpful and practical, especially when the app is already running and you want to take a quick sneak peek at a label or element.
How to use it:
1 — Click on Xcode -> Open Developer Tool -> Accessibility Inspector
or
Hit Command + spacebar and search for Accessibility Inspector
2 — Select the simulator as the target being inspected
3 — Now you're good to select the Inspection follows point (the little icon that looks like a target) and hover it over the elements on the simulator screen
Hovering over Tasks shows us that it's a navigation bar, and its label is Tasks👀.
iOS App Debugging with po
Once you have to get used to finding elements and what they look like, this is going to be your new best friend. Because on top of finding elements, which the other two options also have, you can also interact with them. We love it because instead of adding a line of code to your test and running it and learning if that worked or not after running the test, you can reduce the feedback cycle by using po.
To debug, the first thing you'll need is to create a breakpoint. To do it, click on the line number.
Now, run the test, and it will stop at the breakpoint. The line that starts with lldb is the one you'll run the po commands.
The command to find all elements is
po app.debugDescriptionThat will give literally everything on that screen, and isn't nice to read as the formatting is r̶e̶a̶l̶ ̶b̶a̶d̶ not quite good.
So you can filter elements based on what they are. E.g.:
po app.buttons
Way better right?
Now that you've learned how to find elements, the next step is to put them together (find, interact and assert) and create your first test :)
See you on the next one!
Check my website for more content about testing, mobile, agile and much more! 👇👇👇
