From Point & Click to Pinch & Zoom by Dan Rabinovitz
Download as PPTX, PDF0 likes311 views
The document discusses the transition from desktop to mobile testing in software development, highlighting the importance of mobile browser testing. It provides insights on testing methodologies for mobile applications, particularly using tools like Selenium and Appium, along with practical test examples. The speaker also emphasizes the necessity of effective mobile testing strategies for enhancing customer experience and maintaining a competitive edge in the digital market.
![Test Script - Desktop
25
public void bruinsSearchTest(String browser, String version, String os, Method method) throws Exception {
WebDriver driver = createDriver(browser, version, os, method.getName());
WebDriverWait wait = new WebDriverWait(driver, 15);
Actions action = new Actions(driver);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//Open the web page
driver.get("http://www.kohls.com");
//Search
driver.findElement(By.id("search")).click();
driver.findElement(By.id("search")).sendKeys("boys bruins patrice bergeron jersey");
driver.findElement(By.id("search")).sendKeys(Keys.RETURN);
//Choose a jersey size & add to bag
driver.findElement(By.xpath("//*[@id="container"]/div[4]/div[1]/div[2]/div[2]/div[4]/div[2]/div[2]/a[1]")).click();
action.moveToElement(driver.findElement(By.id("addtobagID"))).click(driver.findElement(By.id("addtobagID"))).build().
perform();
driver.findElement(By.xpath("//*[@id="tr_phase2_ShoppingBg"]/span[2]")).click()
//Go to checkout
driver.findElement(By.xpath("//*[@id="checkout-container"]/a[1]/div")).click();
driver.findElement(By.id("LPGuestCheckout")).click();
//Apply promo code
driver.findElement(By.xpath("//*[@id="shopping_Bag_Rpanel"]/div/div/div[1]/div[3]/div[2]/a")).click();
driver.findElement(By.id("promo-kcInput")).sendKeys("23631047342xxxx");
driver.findElement(By.id("kc-pinInput")).sendKeys(”xxxx");
driver.findElement(By.id("applyInputButton")).click();
driver.findElement(By.id("fancybox-close")).click();
//Verify promo code accepted
assertEquals(driver.findElement(By.id("kohlscashdiscounts")).getText(), "- $5.00");
}](https://image.slidesharecdn.com/frompointandclicktopinchandzoombydanrabinovitz-180315012524/85/From-Point-Click-to-Pinch-Zoom-by-Dan-Rabinovitz-25-320.jpg)
![Let’s Create a Mobile Web test
34
//*[@id="product-
content"]/div[2]/div[1]/div[1]/div[2]/div
[6]/div[1]/a/div](https://image.slidesharecdn.com/frompointandclicktopinchandzoombydanrabinovitz-180315012524/85/From-Point-Click-to-Pinch-Zoom-by-Dan-Rabinovitz-34-320.jpg)
![Test Script – Mobile Web
36
public void kohlsBruinsTest(String browser, String version, String os, String device, Method method) throws Exception
{
WebDriver driver = createDriver(browser, version, os, device, method.getName());
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("http://www.kohls.com");
//Search for a jersey
driver.findElement(By.id("mcom-search-input")).click();
driver.findElement(By.id("mcom-search-input")).sendKeys("boys bruins patrice bergeron jersey");
driver.findElement(By.id("mcom-search-input")).sendKeys(Keys.RETURN);
//Select the right size and add to cart
driver.findElement(By.id("size-section")).click();
driver.findElement(By.id("productSizeCln-1")).click();
driver.findElement(By.xpath("*[@id="sizeRef1"]/div/div/div[1]/button")).click();
driver.findElement(By.id("add-to-bag-btn")).click();
driver.findElement(By.id("productSizeCln-1")).click();
driver.findElement(By.xpath("//*[@id="sizeRef1"]/div/div/div[1]/button")).click();
//Go to checkout
driver.findElement(By.xpath("//*[@id="product-
content"]/div[2]/div[1]/div[1]/div[2]/div[6]/div[2]/div/a")).click();
driver.findElement(By.xpath("//*[@id="checkout-content-wrapper"]/section[2]/section/ng-
include/div/div/div[3]/a")).click();
//Guest checkout
driver.findElement(By.xpath("//*[@id="mcom-login-modal"]/div[4]/div[1]/button")).click();
//Apply discount
driver.findElement(By.xpath("//*[@id="checkout-content-wrapper"]/section[2]/section/ng-
include/div/div/div[3]/a")).click();
driver.findElement(By.xpath("//*[@id="checkout-content-
wrapper"]/section[1]/section/section[1]/form/div/div[1]/div/input")).sendKeys("23631047342xxxx");
driver.findElement(By.xpath("//*[@id="checkout-content-
wrapper"]/section[1]/section/section[1]/form/div/div[2]/input")).sendKeys("xxxx");
//Verify discount is applied
assertEquals(driver.findElement(By.xpath("//*[@id="checkout-content-
wrapper"]/section[1]/section/section[1]/div[4]/div/div/div[3]/div[1]")).getText(), "- $5.00");
}](https://image.slidesharecdn.com/frompointandclicktopinchandzoombydanrabinovitz-180315012524/85/From-Point-Click-to-Pinch-Zoom-by-Dan-Rabinovitz-36-320.jpg)
From Point & Click to Pinch & Zoom by Dan Rabinovitz
- 2. FROM POINT & CLICK TO PINCH & ZOOM D a n R a b i n o v i t z - S e n i o r S o l u t i o n s E n g i n e e r
- 3. • Introduction • Importance of desktop browser testing • Need to move to mobile testing • Considerations to take into account when testing mobile applications • Examples • Conclusion Agenda 3
- 4. Who am I? 4 July 20717
- 5. You are familiar with Selenium and can understand a simple Selenium test Session Assumptions 5
- 6. What are we talking about? 6
- 7. What are we talking about? 7
- 8. Why? 3 Key Ingredients Win in Digital 8 SPEED TO MARKET CUSTOMER EXPERIENCE MOBILE Source: Digital in 2017: Global ReviewSource: The 2016 Mobile App Report, ComScore Amazon releases an update every 11.6 seconds. 79% of users will retry an app only once if it doesn’t work the first time. More than 50%of the world’s traffic comes from mobile devices. 79% 50%11.6sec
- 9. • Mobile app type • Real device capabilities • Locator strategy • Test Language • Native vs WebView contexts • Execution location Considerations 9
- 10. First, a Story… 10 I have a 5 year old son… who LOVES & plays ice hockey….
- 11. First, a Story… 11 His favorite team…
- 12. • Where should we look to buy this? He Wants A New Bruins Jersey 12
- 13. He Wants A New Bruins Jersey 13
- 14. Why Kohl’s? 14
- 15. HOW DOES KOHL’S TEST THEIR WEBSITE?
- 16. Example flow 16
- 17. Let’s Create a test 17
- 18. Let’s Create a test 18 <input type="text" placeholder="Search" class="input- text" id="search" name="search" autocomplete="off">
- 19. Let’s Create a test 19 <input type="text" placeholder="Search" class="input- text" id="search" name="search" autocomplete="off">
- 20. Skipping ahead a few steps in the test creation process… 20
- 21. Let’s Create a test 21
- 22. Let’s Create a test 22
- 23. Let’s Create a test 23 <img alt="Kohl's Expect Great Things" src="/media/images/global- header-refresh-icons/check-out- icon.png">
- 24. Let’s Create a test 24
- 25. Test Script - Desktop 25 public void bruinsSearchTest(String browser, String version, String os, Method method) throws Exception { WebDriver driver = createDriver(browser, version, os, method.getName()); WebDriverWait wait = new WebDriverWait(driver, 15); Actions action = new Actions(driver); driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //Open the web page driver.get("http://www.kohls.com"); //Search driver.findElement(By.id("search")).click(); driver.findElement(By.id("search")).sendKeys("boys bruins patrice bergeron jersey"); driver.findElement(By.id("search")).sendKeys(Keys.RETURN); //Choose a jersey size & add to bag driver.findElement(By.xpath("//*[@id="container"]/div[4]/div[1]/div[2]/div[2]/div[4]/div[2]/div[2]/a[1]")).click(); action.moveToElement(driver.findElement(By.id("addtobagID"))).click(driver.findElement(By.id("addtobagID"))).build(). perform(); driver.findElement(By.xpath("//*[@id="tr_phase2_ShoppingBg"]/span[2]")).click() //Go to checkout driver.findElement(By.xpath("//*[@id="checkout-container"]/a[1]/div")).click(); driver.findElement(By.id("LPGuestCheckout")).click(); //Apply promo code driver.findElement(By.xpath("//*[@id="shopping_Bag_Rpanel"]/div/div/div[1]/div[3]/div[2]/a")).click(); driver.findElement(By.id("promo-kcInput")).sendKeys("23631047342xxxx"); driver.findElement(By.id("kc-pinInput")).sendKeys(”xxxx"); driver.findElement(By.id("applyInputButton")).click(); driver.findElement(By.id("fancybox-close")).click(); //Verify promo code accepted assertEquals(driver.findElement(By.id("kohlscashdiscounts")).getText(), "- $5.00"); }
- 26. LET’S TAKE THIS TO MOBILE WEB…
- 27. Google Makes this Super Easy Device Mode is built into Chrome (added in January 2018) Device mode is for mobile web only, not native app How do we do this? 27
- 28. Let’s Create a Mobile Web test 28
- 29. Let’s Create a Mobile Web test 29
- 30. Let’s Create a Mobile Web test 30
- 31. Let’s Create a Mobile Web test 31
- 32. Let’s Create a Mobile Web test 32 <input type="search" autocomplete="off" autocorrect="off" placeholder="Search" id="mcom-search-input" value="">
- 33. Let’s Create a Mobile Web test 33 <input type="search" autocomplete="off" autocorrect="off" placeholder="Search" id="mcom-search-input" value="">
- 34. Let’s Create a Mobile Web test 34 //*[@id="product- content"]/div[2]/div[1]/div[1]/div[2]/div [6]/div[1]/a/div
- 35. • Repeat as necessary • XPath • Test creation is similar to desktop • No need for emu/sim • Remember: This is easy given Google’s support in Chrome • iOSDriver & AndroidDriver Completing the test script 35
- 36. Test Script – Mobile Web 36 public void kohlsBruinsTest(String browser, String version, String os, String device, Method method) throws Exception { WebDriver driver = createDriver(browser, version, os, device, method.getName()); driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); driver.get("http://www.kohls.com"); //Search for a jersey driver.findElement(By.id("mcom-search-input")).click(); driver.findElement(By.id("mcom-search-input")).sendKeys("boys bruins patrice bergeron jersey"); driver.findElement(By.id("mcom-search-input")).sendKeys(Keys.RETURN); //Select the right size and add to cart driver.findElement(By.id("size-section")).click(); driver.findElement(By.id("productSizeCln-1")).click(); driver.findElement(By.xpath("*[@id="sizeRef1"]/div/div/div[1]/button")).click(); driver.findElement(By.id("add-to-bag-btn")).click(); driver.findElement(By.id("productSizeCln-1")).click(); driver.findElement(By.xpath("//*[@id="sizeRef1"]/div/div/div[1]/button")).click(); //Go to checkout driver.findElement(By.xpath("//*[@id="product- content"]/div[2]/div[1]/div[1]/div[2]/div[6]/div[2]/div/a")).click(); driver.findElement(By.xpath("//*[@id="checkout-content-wrapper"]/section[2]/section/ng- include/div/div/div[3]/a")).click(); //Guest checkout driver.findElement(By.xpath("//*[@id="mcom-login-modal"]/div[4]/div[1]/button")).click(); //Apply discount driver.findElement(By.xpath("//*[@id="checkout-content-wrapper"]/section[2]/section/ng- include/div/div/div[3]/a")).click(); driver.findElement(By.xpath("//*[@id="checkout-content- wrapper"]/section[1]/section/section[1]/form/div/div[1]/div/input")).sendKeys("23631047342xxxx"); driver.findElement(By.xpath("//*[@id="checkout-content- wrapper"]/section[1]/section/section[1]/form/div/div[2]/input")).sendKeys("xxxx"); //Verify discount is applied assertEquals(driver.findElement(By.xpath("//*[@id="checkout-content- wrapper"]/section[1]/section/section[1]/div[4]/div/div/div[3]/div[1]")).getText(), "- $5.00"); }
- 37. BUT WHAT ABOUT THIS?
- 38. What is Appium? 38 ≈ Appium is an open source test automation framework for use with native, hybrid and mobile web apps. It drives iOS, Android, and Windows apps using the WebDriver protocol. From appium.io (For mobile apps)
- 39. • Ask your developers, or • Use a tool like Appium Desktop How to find Native App Selectors 39
- 40. • Starts a local Appium server • Most useful tool is the Inspector Using Appium Desktop 40
- 46. Inspector View 46 Swipe or Tap (by coordinates)
- 50. Putting it all together… 50 public void BruinsSearch(String platformName, String deviceName, String platformVersion, Method method) throws MalformedURLException { AndroidDriver driver = createDriver(platformName, platformVersion, deviceName, method.getName()); //Set Geo Location Location location = new Location(41.2307, -73.0640, 60); driver.setLocation(location); //Allow location access MobileElement location = (MobileElement)(driver.findElement(By.id("com.android.packageinstaller:id/permission_allow_button"))); location.click(); //Accept T&Cs MobileElement permissions = (MobileElement)(driver.findElement(By.id("com.kohls.mcommerce.opal:id/id_accept"))); permissions.click(); //Search for items MobileElement searchBox = (MobileElement)(driver.findElement(By.id("com.kohls.mcommerce.opal:id/id_base_searchViewIcon"))); searchBox.click(); MobileElement searchBoxTextEntry = (MobileElement)(driver.findElement(By.id("com.kohls.mcommerce.opal:id/id_base_searchView"))); searchBoxTextEntry.sendKeys("boys bruins patrice bergeron jersey"); driver.getScreenshotAs(OutputType.FILE); TouchAction searchButton = new TouchAction(driver); searchButton.tap(1317, 2404).perform(); driver.findElement(By.id("com.kohls.mcommerce.opal:id/spinner_text")).click(); … }
- 51. • Mobile testing is critical to your business • Creating a test to execute against a mobile website is EASY • Native app testing – similar concept, different tools • If your tests are written well, they will work cross platform • Sauce Labs has the expertise and knowledge to help you Conclusions 51
- 52. • Drivers Of Change: Appium’s Hidden Engines – Jonathan Lipps, Appium – 10:50 AM Cyril Magnin III • The Power of Polymorphism: Testing Android And iOS From A Single Test Suite - Craig Schwarzwald, Vanguard – 11:30 AM Cyril Magnin II Related SauceCon Sessions Tomorrow 52
- 53. Kohl’s has confidence in their digital experience Getting Back to Our Story… 53
- 54. Kohl’s has confidence in their digital experience Getting Back to Our Story… 54
- 55. I have a happy child …And… 55
Editor's Notes
- #5: Senior Solution Engineer at Sauce Joined Sauce in July 2017 Over 13 years experience as a Sales/Solution Engineer Primarily focused on financial services & insurance industries Experience across the SDLC, from Agile planning to development Live in Connecticut
- #7: Everyone has a website, this is one of my favorites. It’s full of useful information. And, everyone in the room has a website or else they wouldn’t be in business. When it comes to testing websites, Selenium is the 800 lb gorilla in the room. Selenium is the gold standard for functional website testing, it’s easy to get started and reliable. But in today’s world, you need to move to mobile
- #8: So how do you adapt your tests to this iPad? Or iPhone? Or Android? And what if you want to move to testing a native app? How do you adapt to ensure your customers can continue to access your site?
- #9: If creating growth in digital is important to you and your business, you are likely strategizing around three key ingredients for success in digital: Speed to Market: Probably the most famous story around speed to market is Amazon, which currently releases an update to their popular site/app every 11.6 seconds. Of course this is an extreme example, but the point stands that the org that releases faster frequently wins in their market. Customer Experience: In digital, customer experience is critical for success. If your app or site doesn’t work the first time, only 79% of users will try again. So, it’s critical that organizations focus on quality and creating a positive user experience for all. Mobile: Lastly is mobile. Today, 50% of all the world’s web traffic comes from a mobile device. So if you have a digital strategy but her aren’t doing mobile you’re missing out on half of your potential traffic and business.
- #10: Mobile platform – Responsive Web? Hybrid App? Native App? Real device capabilities – Does your web page or app use any? Locator strategy – How do you find element IDs or Xpath strings for native or hybrid apps? Test Language – Appium vs Espresso vs XCUITest Native vs WebView contexts – Why does this matter? Execution location – Emulator/Simulator vs Real Device
- #13: Sometime I check a brick and mortar store, but more often…
- #14: I need to look on a website
- #15: Why? Because they offer tons and tons of coupons and Kohls case and all kinds of other incentives
- #16: Lets start by creating a simple Selenium test and adapating to mobile web and native app
- #21: Skipping ahead a few steps
- #22: We’ve added a Bruins jersey to our cart, now we need to start the checkout flow
- #23: Let’s use the same inspect technique…
- #24: Uh oh, no ID to use
- #25: Which Xpath isn’t recommended, Chrome makes it easy to use in a pinch
- #27: Lets start by creating a simple Selenium test and adapating to mobile web and native app
- #36: Repeat as necessary Use XPath as necessary, may need to use commands like hover too Resulting test may or may not be similar to desktop test script, but process is the same. No need for emulators, simulators, or real devices to write the test Remember: This is easy given Google’s support in Chrome You can change drivers to IOSDriver or AndroidDriver to take advantage of device hardware (location, pinch & zoom, etc), you will not have to change your test script because these extend WebDriver)
- #38: Lets start by creating a simple Selenium test and adapating to mobile web and native app
- #52: Mobile testing is critical to your business – Gartner says so Creating a test to execute against a mobile website is very easy given Google’s Device Mode While Selenium tests will work, Appium enables device specific capabilities (swiping, pinch & zoom, etc) Native app testing, concepts are the same but you need to utilize different tools to identify elements If your tests are written well, they will work cross platform and you can utilize emulators/simulator or real devices for mobile testing Sauce Labs has the expertise and knowledge to help you
- #54: People can search and purchase items…
- #55: So Kohl’s can grow revenue and take advantage of increased mobile traffic