Sauce Labs My Demo App React Native

In this repository you will find the Sauce Labs My Demo App for React Native You can use it as a sample app for testautomation on your local machine, in our Android Emulator/iOS Simulator, or Real Device Cloud. The latest version of the iOS and Android app can be found here.

sample-app-rn.mp4

Table of contents

1. Functionalities
   1. Touch / Face ID
      1. Enabling Touch / Face ID on Android emulators
      2. Enabling Touch / Face ID on iOS simulators
   2. Deep linking
      1. Android from CLI
      2. Use with iOS
         1. iOS from CLI
         2. With Safari
   3. Different languages
   4. QR code scanner
   5. Gestures
   6. Geo Location
   7. Drawing
2. Contributing to the app
3. FAQ
4. Good to know
5. TODO

Functionalities

Touch / Face ID

This app supports TouchID/FaceID/Fingerprint for Android and iOS. It will only be shown when the phone supports this and secondly when this has been enabled through the menu.

Enabling Touch / Face ID on Android emulators

Click see the steps

To enable this on Android emulators you need to do the following (when you have an emulator that supports this):

• Open an emulator

• Activate Screenlock from Settings -> Security

• Go to Fingerprint to add new fingerprint

• When prompt to place your finger on the scanner, emulate the fingerprint using adb command.

  adb -e emu finger touch <finger_id>
  
  #Example
  adb -e emu finger touch 1234

• You should see fingerprint detected message. That’s it. Done.

NOTE:
Make sure you remember the fingerprint number you selected, that needs to be used to select a (non)matching finger print!

Enabling Touch / Face ID on iOS simulators

Click see the steps

To enable this on iOS simulators you need to do the following (when you have a simulator that supports this):

• Open a simulator
• For Touch ID go to the Simulator menu and open Hardware > Touch ID and select Enrolled
• For Face ID go to the Simulator menu and open Hardware > Face ID and select Enrolled

In the previous mentioned menu you can also select a (non)matching Touch / Face ID when the phone is asking for it.

Deep linking

This app supports deep linking for iOS and for Android, this means that screens can directly be opened with a deep link.

The prefix deep link is mydemoapprn:// and the following screens (with their arguments) can be used:

Screen	Path	Remark
Products	store-overview
Product details	product-details/{id}	A mandatory number (from 1-6), basically the id of the products, see here
Cart	cart/{products}	A optional string like this id=2&amount=2&color=black,id=2&amount=5&color=gray, the id is mandatory, the rest will be defaulted if it's not/incorrect provided
Login	login
Webview	webview
Checkout Address	checkout-address
Checkout Payment	checkout-payment
Checkout Review Order	checkout-review-order/{products}/{payment}	- products: A mandatory string like this id=2&amount=2&color=black,id=2&amount=5&color=gray, the id is mandatory, the rest will be defaulted if it's not/incorrect provided - payment: An optional string which can be default or different. default means it uses default payment details and the same shipping address, different means it uses default payement details and a different shipping address. NOTE: By default the address details are defaulted
Checkout Complete	checkout-complete
QR Code Scanner	qr-code-scanner
Geo Location	geo-locations
Drawing	drawing
About	about

Android from CLI

To trigger deep linking for Android you can use ADB commands. For more information see below.

NOTE: the string needs to be escaped when characters like & are being used, so cart/id=2&amount=2&color=black becomes cart/id=2\&amount=2\&color=black

adb shell am start -W -a android.intent.action.VIEW -d "mydemoapprn://product-details/1" com.saucelabs.mydemoapp.rn
adb shell am start -W -a android.intent.action.VIEW -d "mydemoapprn://cart/id=2\&amount=2\&color=black" com.saucelabs.mydemoapp.rn
adb shell am start -W -a android.intent.action.VIEW -d "mydemoapprn://login" com.saucelabs.mydemoapp.rn

Use with iOS

There are 2 ways of using deep links with iOS, through a terminal or through Safari

iOS from CLI

NOTE: the string needs to be escaped when characters like & are being used, so cart/id=2&amount=2&color=black becomes cart/id=2\&amount=2\&color=black

xcrun simctl openurl booted mydemoapprn://product-details/1
xcrun simctl openurl booted mydemoapprn://cart/id=2\&amount=2\&color=black
xcrun simctl openurl booted mydemoapprn://login

With Safari

Open Safari and type the following

mydemoapprn://product-details/1

It will prompt a dialog asking you to open the app, select Yes and it will open the screen you selected.

For Appium scripts

For Appium script the following command can be used

// sample.spec.ts
import {openDeepLinkUrl} from '../../helpers/utils';

describe('Sample test', () => {
  it('should be able to open a screen through a deepling', async () => {
    // Open the product details screen for product 1, which is the `Backpack`
    await openDeepLinkUrl('product-details/1');

    // Open the cart screen with
    //  - product 1 (Backpack, amount is 1 and color is black)
    //  - product 1 (Backpack, amount is 2 and color is blue)
    await openDeepLinkUrl(
      'cart/id=1&amount=1&color=black,id=1&amount=2&color=blue,',
    );

    // Open the login page
    await openDeepLinkUrl('login');
  });
});

Webview

Within the menu you can find the option Webview. This will lead you to a screen where you can load any valid https-url. The url will be loaded into a webview, this will be equal for Android and iOS.

The purpose of this Webview-screen is that you can learn/test how to switch between the NATIVE and WEBVIEW-context with Appium.

Different languages

This app supports 4 1 different languages and will automatically check the language of the device to set the right language. The supported languages are:

• Dutch @TODO
• English
• German @TODO
• Spanish @TODO

QR code scanner

This app now also has a QR code scanner. You can find it in the menu under the option "QR CODE SCANNER". This page opens the camera (you first need to allow the app to use the camera) which can be used to scan a QR Code. If the QR code holds an URL it will automatically open it in a browser. The following image can be used to demo this option.

Gestures

This app also support different Gestures which can be found below. @TODO

Geo Location

This app now also supports testing changing the Geo Location. It will pick up changes when the location is mocked.

Drawing

Drawing your favorite Sauce Bolt can now been done in this app, you can even save it to your camera roll.

Contributing to the app

If you want to contribute to the app and add new functionalities, please check the documentation here.

FAQ

React Native on Android: Cannot run program “node”: error=2, No such file or directory

Check this post.

Android Studio error "Installed Build Tools revision 31.0.0/32.0.0 is corrupted"

See this SO answer.

Good to know

Added FBJS

We needed to add fbjs as an extra dependency for react-native-cameraroll, it was included as a dependency of the package. There is a PR created for this, but at the time of migration this wasn't merged yet, see here.

TODO

• TestIds
• TestFairy integration
  • Add TF SDK
  • [] Add TF events, see this for an example
• Splash screen
• Android/iOS icons
• About screen
• Empty cart
• TouchId/FaceId
• Deep linking with login
• Webview
• Different Languages
  • English
  • Dutch
  • Spanish
  • Deutsch
• QR-code scanner
• Gestures
  • Drag and Drop
  • Pinch Zoom
  • Swipe
• GEO location
• Drawing
• Think if we need to store data to the local storage or keep it in the session storage.
• Write Tests:
  • Unit Tests
  • E2E Tests
    • Default tests:
      • Catalog
      • Product details
      • Cart
      • Login
      • Checkout Address
      • Checkout Payment
      • Checkout Review Order
      • Checkout Complete
      • Navigation between screens
    • Extra tests:
      • TouchId/FaceID/Fingerprint:
        • Local/Sauce Emulators and Simulators
        • Sauce Labs Real Devices
      • Webview:
        • Local/Sauce Emulators and Simulators
        • Sauce Labs Real Devices
      • QR Code Scanner on Sauce Labs Real Devices
      • Geo Location:
        • Local/Sauce Emulators and Simulators
        • Sauce Labs Real Devices
      • Drawing:
        • Local/Sauce Emulators and Simulators
        • Sauce Labs Real Devices
• Upgrade dependencies (to all npx react-native init TsDemo --template react-native-template-typescript v:0.66.4)
  • Dependencies
    • react-native
    • @react-native-community/cameraroll
    • @react-native-community/masked-view
    • @react-navigation/bottom-tabs
    • card-validator
    • expo-local-authentication
    • i18n-js
    • react-native-bootsplash
    • react-native-camera
    • react-native-fs
    • react-native-geolocation-service
    • react-native-gesture-handler
    • react-native-keyboard-aware-scroll-view
    • react-native-localize
    • react-native-permissions
    • react-native-qrcode-scanner
    • react-native-reanimated
    • react-native-safe-area-context
    • react-native-screens
    • react-native-signature-canvas
    • react-native-testfairy
    • react-native-unimodules
    • react-native-vector-icons
    • react-native-version-number
    • react-native-webview
    • rn-fetch-blob
  • devDependencies
    • babel
    • @react-native-community/eslint-config
    • @types/i18n-js
    • eslint
    • eslint-plugin-wdio
    • jest
    • react-native-clean-project
    • react-native-version
    • ts-node
    • typescript
    • WDIO
• Remove dependencies
  • Remove FBJS, see here