Mobile Device Testing for Cross-Platform Apps

Rate this content
Bookmark

Testing your React Native, Capacitor, or other cross-platform apps on mobile devices is a critical but complex step of deployment. If you’re used to web testing, navigating the options for iOS and Android can be daunting. This session will cover virtual & real device options, native build types for test deployments, how to deliver apps to testers, and even how to run automated tests against real devices.

Cecelia Martinez
Cecelia Martinez
28 min
07 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses cross-platform mobile testing, including the challenges it presents and the types of devices and builds that can be used for testing. It explores manual testing, automated testing, and the use of tools like Appium and SOS Labs for running tests on real devices. The Talk also touches on PWA automation, the choice between mobile apps and PWAs, and different testing approaches and performance considerations.

Available in Español

1. Introduction to Cross-platform Mobile Testing

Short description:

This is mobile device testing for cross-platform apps. I am Cecilia Martinez, a developer advocate for AppFlow, a mobile CICD platform built by Ionic. Cross-platform apps are built with one code base and deployed to iOS, Android, and the web. Frameworks like React Native, Ionic with Capacitor, Flutter, .NET MAUI, and Kotlin Multiplatform enable this. The result is a faster development process and a consistent experience for developers and users.

So, yes, this is mobile device testing for cross-platform apps. As you probably have heard by now, I am Cecilia Martinez. I'm a developer advocate for AppFlow, which is a mobile CICD platform built by Ionic.

So, you're probably more familiar with Ionic or Capacitor than you are with AppFlow. But you can learn more about mobile deployments, mobile building, by following me on Twitter or GitHub at Cecilia Creates. Or feel free to contact me on LinkedIn as well at just LinkedIn.com slash in slash my name.

So, when we talk about cross-platform, what we're talking about specifically is apps that you build with one code base, but that you deploy anywhere. So, iOS, Android, and then also to the web. So, there's a lot of frameworks that you can use to do this. If you're thinking in the kind of the web ecosystem and web-based frameworks, the ones that are going to come to mind are React Native and then Ionic paired with Capacitor. But you can also use tools like Flutter, which is based in Dart, .NET MAUI, or Kotlin Multiplatform. But the idea is that you build ones to deploy anywhere. And this gives you not only a faster development process, but a more consistent developer and user experience across platforms.

2. Challenges of Cross-platform Mobile Testing

Short description:

Cross-platform development erases the problem of separate teams working on iOS and Android apps individually. However, it comes with its own challenges. The deployment processes for web, iOS, and Android are different, and testing native builds on real devices requires platform-specific expertise. Testing is crucial for mobile apps as deployments are high risk and users are picky. Therefore, thorough testing is necessary to ensure a positive user experience.

You've often seen something where, you know, the iOS version of the app has a feature that isn't available yet on Android, or maybe there's, you know, certain apps that are only on iOS. And that's because typically you may see separate teams working on those apps individually. With cross-platform, you erase that kind of problem. But cross-platform is not without its own challenges. So, while the dev processes are the same, the deployment processes are not. You have very, very different build, testing, and deployment processes across web, iOS, and Android. This creates really specific challenges when it comes to testing these applications, especially when you're testing the actual native builds on real devices. You have platform-specific test cases that you have to consider as well. So, even if you write the code the same, it will actually engage with the device differently, and you have to consider that. And that requires some expertise of each platform. So, if you are a web developer and you are building cross-platform for the first time, and it's the first time that you're dealing with mobile applications, you have to learn the nuances between Android and iOS to be able to effectively test those applications. And testing is really important for mobile applications. Deployments are high risk. They take a lot longer. You have to go through the app stores and deal with that approval process. So, the apps need to be very well tested before they are installed on a user's device. Users are also very picky about their mobile applications. They encounter one bug and they uninstall, or they never use it again. So, it's important that you are able to test these applications appropriately.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Limitless App Development with Expo and React Native
React Advanced Conference 2021React Advanced Conference 2021
27 min
Limitless App Development with Expo and React Native
App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required!
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
Building a Mobile App with Expo, EAS, and React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
35 min
Building a Mobile App with Expo, EAS, and React Native
It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next.
React Native Architecture at Product Hunt
React Summit Remote Edition 2021React Summit Remote Edition 2021
18 min
React Native Architecture at Product Hunt
I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others.
The New Architecture Is Here… What Now?
React Advanced Conference 2022React Advanced Conference 2022
22 min
The New Architecture Is Here… What Now?
The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level!
Mobile Deployments for Web Developers
JSNation 2023JSNation 2023
23 min
Mobile Deployments for Web Developers
It's easier than ever to use JavaScript to build native mobile applications. But for web developers building in the mobile ecosystem for the first time, deploying cross-platform apps built with tools like Capacitor or React Native can be complex. Learn about the mobile-specific deployment considerations through the lens of a web developer, including the key differences between mobile and web, how to develop a deployment strategy, and how to evaluate tooling options.

Workshops on related topic

Bringing Your Web App to Native With Capacitor
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
WorkshopFree
William Lyon
William Lyon
Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.
Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL
PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.
Bringing your React Web App to native with Capacitor
React Summit 2022React Summit 2022
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.