What's wrong with iOS or how to tame BrowserStack
Hello everyone and welcome to my hub about interesting problems and their solutions in my daily work. I am sure that every QA (and not only) will be able to find something interesting and useful here. Let's begin!
A couple of weeks ago I took on the task of writing and setting up video player autotests for different platforms (Windows, MacOS, iOS and Android). I decided that using Selenium in conjunction with NodeJS would be a good option, since this particular framework allows you to work not only with desktop, but also with mobile browsers (unlike Cypress).
A small digression: I don’t think that in this article it’s worth talking about basic points like the pageObject pattern and selectors, which are worth a separate article.
I started writing and setting up tests. What basic checks can be applied in this case? What comes to mind is clicking the play button and monitoring the status of the video element on the page.
Let's see what happened:
go to the player page,
pressing the play button,
wait three seconds (let the video play),
video status tracking.
Next, I started setting up the browserstack.yml config file, where I specified the platforms I needed. It looks something like this:
And now, finally, I’m ready to launch the first iteration of tests, when suddenly… iOS devices crash with the error expected false to be true
Let me briefly explain what the problem is: for a long time I could not understand what exactly was wrong with the tests specifically on iOS devices. On Android, Windows and MacOS, when I pressed the play button, the video would start playing after a while, but on iOS, for some reason, the video would freeze and not start as I expected.
After several hours of working with BrowserStack technical support and chatting with ChatGPT, I was able to resolve this issue. BrowserStack technical support even called me and together we solved the problem of running tests on iOS.
What was wrong? It turns out that iOS devices handle the emulation of touches and button presses in their own way, which can lead to errors and test crashes. In order for the tests to run successfully, you need to add parameters to the config file for iOS devices appium:nativeWebTap:true And browserstackLocal:false. This is what the config file should look like:
The first condition correctly handles button clicks in web browsers on iOS, and the second runs tests in the browserStack environment itself. Running in a browserStack environment is needed for pages that are publicly accessible. If the pages are on a closed network, then you need to set browserstackLocal: true.
Note that for Android, Windows and MacOS you do not need to add the parameter appium:nativeWebTap:truesince on these platforms click emulation is processed correctly, and the second parameter is set globally for the entire config.
Here's what the tests look like after making the changes:
It's time to summarize: I managed to run and configure basic video player tests for different platforms and browsers and integrate these tests into browserStack. I'm sure I'm not the only one who has problems running tests on iOS devices, which can sometimes be a bit finicky. Share in the comments what problems you have when setting up and running autotests, it will be interesting to read and analyze (and maybe write a new article).
Thank you all and see you again!