SlideShare une entreprise Scribd logo
1  sur  32
Vishal
Android Test Night #2
Android React Native
UITesting
Software Engineer in Test
Case Study (Mobile Automation)
SWET (past)
Core Member
Vishal Banthia @vbanthia @vbanthia_
Some Previous Talks, Blogs & Tutorials
• Android E2E Testing at Mercari @ Android Test Night
• Reliable Mobile Test Automation @SRE-SET Automation Night
• Android Device Farm at Mercari
• Appium Docker Demo
• STF Appium Example
• About React Native
• Automating React Native UITests using Appium
• Current problems with React Native tests
• Next plan
Agenda
マスター タイトルの書式設定
• マスター テキストの書式設定
In June, we had a major update in mercari US app.
mercari US app
Native Native Native React-Native
マスター タイトルの書式設定
• マスター テキストの書式設定
• Because its NATIVE not hybrid
• Cross Platform. Works for both android and iOS
• Reusable UI components
• Faster development with Live-Reload feature
• Can deploy anytime like backend. No Apple pain!
• Many more ...
Why React-Native
マスター タイトルの書式設定
• マスター テキストの書式設定
UITesting ...
マスター タイトルの書式設定
• マスター テキストの書式設定
Automation Architecture
Ruby
Appium
(UIAutomator2)
Test Script Automation tool App Under Test
マスター タイトルの書式設定
• マスター テキストの書式設定
Automation Architecture
Ruby
Appium
(UIAutomator2)
Test Script Automation tool App Under Test
マスター タイトルの書式設定
• マスター テキストの書式設定
Problem ...
マスター タイトルの書式設定
• マスター テキストの書式設定
React Native View Hierarchy
マスター タイトルの書式設定
• マスター テキストの書式設定
Appium supports following finders
id => view resource-id
accessibility_id => view content-description
マスター タイトルの書式設定
• マスター テキストの書式設定
React Native View Hierarchy
マスター タイトルの書式設定
• マスター テキストの書式設定
React Native Documentation for TestID
https://facebook.github.io/react-native/docs/view.html#testid
マスター タイトルの書式設定
• マスター テキストの書式設定
Let’s add testId
マスター タイトルの書式設定
• マスター テキストの書式設定
Nothing changed …
マスター タイトルの書式設定
• マスター テキストの書式設定
In case of android react-native testId property does not
add either resource-id or content-desc. They add this
value into a different view property called `tags`.
Unfortunately, there is no way to find an element using
tags through UIAutomator driver.
Also, currently there is no way to add `resource-id` in
react-native. All efforts (PR) have been rejected because
they conflict with facebook internal test framework.
Long Battle: https://github.com/facebook/react-native/pull/9942
マスター タイトルの書式設定
• マスター テキストの書式設定
Solution ...
マスター タイトルの書式設定
• マスター テキストの書式設定
Add accessibilityLabel
● testID for iOS
● accessibilityLabel for Android which set content-desc
マスター タイトルの書式設定
• マスター テキストの書式設定
Add accessibilityLabel ...
マスター タイトルの書式設定
• マスター テキストの書式設定
After this test automation was possible
using Appium similar to Native App
マスター タイトルの書式設定
• マスター テキストの書式設定
Current Problems
• Adding testID does not work as expected sometime
because we need to make all above parents also
accessible
• Adding testID and accessibilityLabel does not have same
effect on iOS and android respectively. So, need to confirm
on both platform after addition
• With accessibilityLabel approach, application will not be
friendly for Visually Impaired people
マスター タイトルの書式設定
• マスター テキストの書式設定• ReactNative tests are more flaky compare to Native Test
Current Problems
マスター タイトルの書式設定
• マスター テキストの書式設定• UI Rendering approach and lifecycle is different in
ReactNative compare to Native app
• Approaches or Practices being used for Native app tests
sometime fails because of this reason
Why tests are more flaky?
マスター タイトルの書式設定
• マスター テキストの書式設定
Future Plan ...
https://hackernoon.com/detox-gray-box-end-to-end-testing-framework-for-mobile-apps-
196ccd9564ce
マスター タイトルの書式設定
• マスター テキストの書式設定
Detox
Gray box, not black box
マスター タイトルの書式設定
• マスター テキストの書式設定 Tests run in same process
Can access memory
Cannot ship binary which is used for
testing
Black Box Gray Box
Test Script does not know about what
is happening inside Test Target App
Can use only API provided by OS
It is more like testing similar to what
an end user can do
Can ship same binary which went
under testing
マスター タイトルの書式設定
• マスター テキストの書式設定
Gray Box Testing ...
マスター タイトルの書式設定
• マスター テキストの書式設定
Detox …
Detox uses Espresso for Android and EarlGray for iOS
マスター タイトルの書式設定
• マスター テキストの書式設定
How Detox Works ...
マスター タイトルの書式設定
• マスター テキストの書式設定
Conclusion
Till now, I was also in favour of Black box testing but
now I also think Gray Box approach is better and
more reliable
マスター タイトルの書式設定
• マスター テキストの書式設定
Thank You!

Contenu connexe

Tendances

Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトークSeleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
Y Watanabe
 
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform
Masaki Nakagawa
 

Tendances (20)

ハイパフォーマンスSeleniumテスト@サイボウズ
ハイパフォーマンスSeleniumテスト@サイボウズハイパフォーマンスSeleniumテスト@サイボウズ
ハイパフォーマンスSeleniumテスト@サイボウズ
 
テスト自動化の現場で困ること SI-Toolkitが解決すること
テスト自動化の現場で困ること SI-Toolkitが解決することテスト自動化の現場で困ること SI-Toolkitが解決すること
テスト自動化の現場で困ること SI-Toolkitが解決すること
 
海外のSeleniumカンファレンスではどんな発表がされているのか2014
海外のSeleniumカンファレンスではどんな発表がされているのか2014海外のSeleniumカンファレンスではどんな発表がされているのか2014
海外のSeleniumカンファレンスではどんな発表がされているのか2014
 
コードレビューをより良くする Danger x Android
コードレビューをより良くする Danger x Androidコードレビューをより良くする Danger x Android
コードレビューをより良くする Danger x Android
 
Stack2017 自動化困難な状況での活動方法
Stack2017 自動化困難な状況での活動方法Stack2017 自動化困難な状況での活動方法
Stack2017 自動化困難な状況での活動方法
 
サイボウズがWebアプリ自動テスト に活用しているossツールの紹介
サイボウズがWebアプリ自動テスト に活用しているossツールの紹介サイボウズがWebアプリ自動テスト に活用しているossツールの紹介
サイボウズがWebアプリ自動テスト に活用しているossツールの紹介
 
20121019 jenkins勉強会lt資料
20121019 jenkins勉強会lt資料20121019 jenkins勉強会lt資料
20121019 jenkins勉強会lt資料
 
iOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進めるiOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進める
 
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テストSTFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
 
Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトークSeleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
Seleniumと相性がいいテンプレートエンジンMixer2-第1回selenium勉強会ライトニングトーク
 
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
2015-05-23 クラウドの運用になって インフラエンジニアは何が変わるのか?
 
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LTエンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
 
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform
 
Dot netconf2017 - VS拡張
Dot netconf2017 - VS拡張Dot netconf2017 - VS拡張
Dot netconf2017 - VS拡張
 
capybara で快適なテスト生活を
capybara で快適なテスト生活をcapybara で快適なテスト生活を
capybara で快適なテスト生活を
 
2017年のiOSアプリ開発におけるCI事情
2017年のiOSアプリ開発におけるCI事情2017年のiOSアプリ開発におけるCI事情
2017年のiOSアプリ開発におけるCI事情
 
fastlane x iOSアプリのCI
fastlane x iOSアプリのCIfastlane x iOSアプリのCI
fastlane x iOSアプリのCI
 
Xcode10での テスト周りの進化をふりかえる
Xcode10での テスト周りの進化をふりかえるXcode10での テスト周りの進化をふりかえる
Xcode10での テスト周りの進化をふりかえる
 
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
 
第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座第9回Jenkins勉強会 超簡単Pipeline講座
第9回Jenkins勉強会 超簡単Pipeline講座
 

Similaire à Android ReactNative UITesting

タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
Ataru Osaka
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
 
iOS UI Component API Design
iOS UI Component API DesigniOS UI Component API Design
iOS UI Component API Design
Brian Gesiak
 
IDEを目指す開発者コンソール
IDEを目指す開発者コンソールIDEを目指す開発者コンソール
IDEを目指す開発者コンソール
minoaw
 
テスト初心者Androiderのためのソフトウェアテスト入門
テスト初心者Androiderのためのソフトウェアテスト入門テスト初心者Androiderのためのソフトウェアテスト入門
テスト初心者Androiderのためのソフトウェアテスト入門
Satoshi Watanabe
 
Build insider testingwithvs
Build insider testingwithvsBuild insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
 

Similaire à Android ReactNative UITesting (20)

タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
タウンワークアプリの案件開発を支えるオフショアチームの成り立ちとこれから / iOSDC Japan 2021
 
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps 『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
 
Robotium を使った UI テスト
Robotium を使った UI テストRobotium を使った UI テスト
Robotium を使った UI テスト
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
 
Test automation strategy for .net core 3 transition
Test automation strategy for .net core 3 transitionTest automation strategy for .net core 3 transition
Test automation strategy for .net core 3 transition
 
Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!
 
iOS UI Component API Design
iOS UI Component API DesigniOS UI Component API Design
iOS UI Component API Design
 
JaSST'16 Tokyo モバイルセッション
JaSST'16 Tokyo モバイルセッションJaSST'16 Tokyo モバイルセッション
JaSST'16 Tokyo モバイルセッション
 
Windows 開発者のための Dev&Ops on AWS
Windows 開発者のための Dev&Ops on AWSWindows 開発者のための Dev&Ops on AWS
Windows 開発者のための Dev&Ops on AWS
 
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
 
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみようReact NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
 
IDEを目指す開発者コンソール
IDEを目指す開発者コンソールIDEを目指す開発者コンソール
IDEを目指す開発者コンソール
 
テスト初心者Androiderのためのソフトウェアテスト入門
テスト初心者Androiderのためのソフトウェアテスト入門テスト初心者Androiderのためのソフトウェアテスト入門
テスト初心者Androiderのためのソフトウェアテスト入門
 
React Nativeで始めるアプリ開発
React Nativeで始めるアプリ開発React Nativeで始めるアプリ開発
React Nativeで始めるアプリ開発
 
【Agile Conference tokyo 2011】 継続的フィードバック
【Agile Conference tokyo 2011】 継続的フィードバック【Agile Conference tokyo 2011】 継続的フィードバック
【Agile Conference tokyo 2011】 継続的フィードバック
 
Build insider testingwithvs
Build insider testingwithvsBuild insider testingwithvs
Build insider testingwithvs
 
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
 
Jsug2015 summer spring適用におけるバッドノウハウとベタープラクティス
Jsug2015 summer spring適用におけるバッドノウハウとベタープラクティスJsug2015 summer spring適用におけるバッドノウハウとベタープラクティス
Jsug2015 summer spring適用におけるバッドノウハウとベタープラクティス
 
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】 Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
 
Web area-phone-home
Web area-phone-homeWeb area-phone-home
Web area-phone-home
 

Plus de Vishal Banthia (6)

Securing microservices continuous delivery using grafeas and kritis
Securing microservices continuous delivery using grafeas and kritisSecuring microservices continuous delivery using grafeas and kritis
Securing microservices continuous delivery using grafeas and kritis
 
Microservices development at scale
Microservices development at scaleMicroservices development at scale
Microservices development at scale
 
Kubernetes Controller for Pull Request Based Environment
Kubernetes Controller for Pull Request Based EnvironmentKubernetes Controller for Pull Request Based Environment
Kubernetes Controller for Pull Request Based Environment
 
Microservice Development Using Telepresence
Microservice Development Using TelepresenceMicroservice Development Using Telepresence
Microservice Development Using Telepresence
 
Mercari SET and Productivity
Mercari SET and ProductivityMercari SET and Productivity
Mercari SET and Productivity
 
Reliable mobile test automation
Reliable mobile test automationReliable mobile test automation
Reliable mobile test automation
 

Android ReactNative UITesting