iOS UI Testing in Firefox Focus

I continue contributing to the open source projects, and I got back to Firefox Focus this week. The issue I worked on was listed in July 2018, and nobody had taken it for some reason 🤔 It caught my attention because it asked to add a UI test for one of the pages of the browser, and I haven’t done any testing for iOS apps before. I thought that it would be a good opportunity to learn how to do it.

Issue

They added a page for no internet connection error, which is triggered when a user tries to go to a webpage without having the internet.

Fix

Firstly, I started my research on how to do UI testing. I found the following story on Medium, which is a nice introduction to iOS testing:

Automated UI-Testing for iOS Apps

Firefox Focus uses XCUITest library for the UI tests.

A few years ago Apple discontinued their JavaScript Automation Framework and replaced it with XCUITest. This is an Apple supported native library meaning you can write your UI tests in Objective-C or Swift. (Automated UI-Testing for iOS Apps by Jan Olbrich)

After analyzing existing tests in the project, I started writing my own. My first steps were to write a basic test that would just start the app and exit it (because I hadn’t written any other tests). Once I created this basic template for my test, I had to write an actual test function for the No Connection page.

I started with just a basic loading of mozilla.com website. Worked fine 👍 Next, I had to turn off WiFi on the iOS simulator in order to trigger the No Connection page. However, I faced a problem at this step. It turned out that it’s impossible to turn off WiFi just on your iOS simulator neither using XCode nor programmatically 🤭 Instead, you need to disconnect WiFi on the computer, where you compile and build the app. Obviously, that’s not a good option because other tests need the internet connection, and they would fail in this case.

I had to find a solution to this problem. I decided to add a condition, which would check whether there is network or not. If there is no network, the test will run. I found how to implement it in the following blog post:

Check internet availability in Swift - Mobikul

Then, I added a few lines of code that checks whether the error page was displayed:

loadWebPage("mozilla.com")
let noInternetConnection = app.staticTexts["The Internet connection appears to be offline."]
XCTAssertEqual("The Internet connection appears to be offline.", noInternetConnection.label)

Let’s walk through these lines of code:

1. Tries to load Mozilla website
2. Get a label from the No Internet Connection page with the error message
3. Assert that this label exists and the value is equalled to “The Internet connection appears to be offline.”

That’s it! You can find the full code in my Pull Request 🙌