Archive | Web Development RSS feed for this section

A page object representing both desktop and mobile views or website and mobile app

2 Mar

It just occurred to me today, from reading a Selenium forum post, that a past blog post of mine can also apply to the following cases:

  • you have both desktop and mobile views for a website or web app (e.g. responsive design, etc.)
  • you have a website and a native mobile app that offers similar service/functionality

and as such in both these cases there is shared logic (user/app/site workflow, element locators – even if the actual values differ, but the “logical” representation is the same such as login button on both web site and mobile app, etc.).

Using the techniques defined in that other post, you can share locator references/variables and share page object methods and have a single page object represent both mobile & web versions. For sharing of methods with branching logic, instead of checking which A/B flow to go through, you check what platform you’re on and go to appropriate branch logic based on that.

Also on some specifics, I haven’t tested this type of implementation before, but in theory should work out even for cases where you have website and a native mobile app:

  • You just have to use the right driver instance in the page object methods (or instantiate the page object with the right driver instance), etc. based on the platform (e.g. Appium/ios-driver/etc. vs Selenium WebDriver).
  • For shared locators, XPath may work best, using the multi-valued locator approach with pipes “|”. That is because I know Appium (at least) supports XPath based locators. Not sure about CSS selectors. So, I’m hoping/assuming Appium supports the multi-valued XPath functionality. Don’t know about the other tools lke ios-driver, etc. If this doesn’t work out, you would need separate locator references/variables then.

Some of you might not agree, but this is one way to do it with code reuse via some manageable complexity. The alternative is to have separate page objects with separate methods and locators. That keeps things simpler but give you extra files, extra code, and some redundancy when some of that code and locators are kind of similar. In the end of course, choose whatever works best for you.

Advertisements

Tips on mobile and tablet device testing, shared usage, and remote testing outside corporate network

6 Jun

Here’s some useful tips for development and QA testing of websites or apps on mobile/tablet devices, if you didn’t already know.

Tip on wireless network login (accounts) when sharing between people

This tip is for those who use a corporate wireless network that has user accounts per person without a common shared account (or guest access to internal resources).

Rather than ask the previous user for their network login password if/when prompted by the (iOS) device, here’s how to resolve that issue of sharing between users. The tip here is specific to iOS but should be similar for Android, Windows Phone, Windows, Mac, etc.

Option 1 – login with your own network login

You only need to do this if ever prompted to login with only a password (or prefilled username) rather than the whole username & password.

  1. Clear the cached user login info.
    1. Settings > Wi-Fi > find network (name), tap the wifi network’s settings/properties icon (a blue circled arrow on iOS 6, an “i” circled tooltip on iOS 7).
    2. Choose Forget this Network
  2. Find the network (name) again in wifi settings
  3. Select that network. You’ll now be prompted for the login username & password, and not just a password to cached login
  4. If you don’t like “your” login cached, then “forget” the network after using the device.

Option 2 – use other available network but then connect to internal network

This method won’t require you to keep swapping user logins when device shared between people. This only works if you have a wireless access for guests (that perhaps only grants access to internet and some internal resources but not all), or some public wireless access but not corporate wireless access.

  1. Connect to the guest or public wireless network
  2. Connect to internal network using VPN app on the mobile/tablet/device
  3. Disconnect VPN when done testing

Tips on remote testing at home or outside local network

When you’re at home or outside the local network, you don’t have access to internal resources. Here’s some options.

Option 1 – device VPN

Use VPN on the device to connect internally.

Option 2 – shared computer VPN

Use VPN on your computer and route network requests from device through a proxy server running on your computer, assuming both computer & device are on same network. This method allows you to share VPN from computer to device.

Tips on remote debugging of mobile, tablet devices

For Windows, see Debugging mobile and tablet websites on iOS – on Windows or locally on device

For Mac, search the web for iOS remote debugging for details.

Tips on HAR file capture on mobile/tablet devices

For iOS: https://github.com/andydavies/ios-har-builder

For Chrome mobile (Android)?: https://github.com/cyrus-and/chrome-har-capturer

Device screen sizes for testing mobile and tablet views of a site and user agent tools

6 Jun

These tips may be found elsewhere on the web already, I’m just archiving this info I put together a while back into a single repository in the form of a blog post.

Table quick reference for device screen sizes

Device Type Screen Size (width x height, in portrait view, landscape = swapped values)
Old iPhones up to iPhone 4S 320×480
iPhone 5 series 320×568
iPhone 6 375×667
iPhone 6+ 414×736
iPad (any model so far) 768×1024

 

Online references for these screen sizes:

CSS Media Queries for iPads & iPhones | Stephen Gilbert

http://www.emailonacid.com/blog/details/C4/adapt_your_media_queries_for_apples_new_iphone_6_and_6

css3 – iPhone 6 and 6 Plus Media Queries – Stack Overflow

Some desktop browser tools to assist with testing mobile and tablet views of a website (there are more you can lookup yourself)

User-Agent Switcher for Chrome – Chrome Web Store

Window Resizer – Chrome Web Store

User Agent Switcher :: Add-ons for Firefox

Firesizer :: Add-ons for Firefox

Safari has bulit in user agent switcher between iPhone, iPad, and normal Safari desktop. Not sure about resizing window to match user agent though.

Chrome version upgrade can break Chrome extensions?

28 Jan

This is a short blog post today:

Who would have thought this, but some recent Chrome version upgrade can break the UI of your Chrome extension (by changing extension popup window size and font sizes). I only found out after reading a user review.

For reference to the particular issue: https://code.google.com/p/autosmsclients/issues/detail?id=3

and now I have to find time to go debug and fix this, just because Chrome decided it wanted to change things on how a Chrome toolbar UI renders, and without notifying it’s extension developers about this…sigh…

WebDriver API and JSONWireProtocol is not just for web and mobile applications testing, it can be for desktop too!

19 Jan

And so, here’s a blog post about just that. I’ve found that the WebDriver API in general, with regards to common location strategies of ID, name, class, tag, and kind of XPath, along with element manipulations–such as click, type/sendKeys, get/set text, get attributes, mouse operations, key up/down, taking screenshots, finding elements & validating properties (enabled, visible, selected)–all that being common across web, mobile, and desktop.

Selenium/WebDriver started off for web applications. Then came along Appium, ios-driver, etc. which expanded it to the mobile space, first iOS then Android, and now somewhat even Windows Phone.

But there has been very little in the desktop area. The first for it was Appium for Mac. And we’ve seen nothing else since. Though if you consider unofficial Selenium/WebDriver-like APIs, then maybe there’sa few more: Twin and sikuli-remote-control. But now, I’ve worked out some proof of concept prototypes (based off the old Appium Python implementation) to give you more options to desktop automation using WebDriver API and for Windows, not Mac!

https://github.com/daluu/AutoItDriverServer
https://github.com/daluu/AutoPyDriverServer

Check them out. Pretty interesting. The AutoIt one has a Selenium integration demo showing automation of AutoIt and Selenium together against websites using 2 drivers – a “web” driver and an AutoIt driver. They’re not Selenium Grid compatible yet, something to look into for the future. But at least they work for remote deployment. Though there is a way to make it work unofficially with Selenium Grid deployment of Selenium tests (but where these desktop UI servers are just not officially part of Grid as nodes) – this solution will be presented in a future blog post.

And last, I had wanted to complete with a three’s company big bang, but I couldn’t get Sikuli working just yet, maybe in the future…

https://github.com/daluu/SikuliDriverServer

So try them out, submit feedback, send pull requests with enhancements and bug fixes, etc.! 😉

P.S. all this made possible by the great work of others. Like the Appium team for the server base I used. And if/when I work on the Java server version – the Selenium team or ios-driver team, and .NET server version – Jim Evans for his Strontium server implementation. As well as the work of those who build great free or open source tools like AutoIt, Sikuli, AutoPy.

Update 6/5/2015: since my post, I found a new solution that’s better and more recent than Twin for desktop Selenium-style UI automation – Winium.

Debugging mobile and tablet websites on iOS on Windows or locally on device

13 Jun

I was doing some research and came across these useful tools one can use to debug and analyze mobile/tablet versions of websites/web applications in the case one doesn’t have a Mac handy to do the remote Safari debugging.

Remote Safari debugging on Windows

You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There’s a nice blog post about the steps to do it in link below.

http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder

The process of using it is much the same as with Safari remote debugging. Have the app open, connect device to Windows via USB, have Safari open on device, then browse device in the app, and open debugger in the app. The tool also will require you to create a Telerik account, and either load/use the default app or create a blank (javascript?) app just to use for debugging mobile Safari on your device.

The tool requires a license or you can use the trial, which becomes a starter edition afterwards. I think the starter edition will still allow you to do the debugging.

NOTE: using this method may require you to have the iOS device drivers to be able to interact with it from AppBuilder. You can get the device drivers by installing iTunes, but if you want to avoid that bloat, you can try to get just the drivers by searching online or downloading iTunes and extracting out the drivers from the installer so you only install the drivers rather than the whole iTunes package, both of which are not covered in this blog post.

Local device debugging on iOS/iPhone/iPad

You can also try these iOS apps below, you can find them in the iTunes App store. They give you built in developer tools like feature (right on iOS, no remote debugging needed) that mobile Safari doesn’t offer. However, they are not the native mobile Safari view/app, though I think it might use the internals of mobile Safari/Webkit to be close enough. These apps are useful when you don’t have a Mac or Windows PC around to do remote debugging with, so you can debug locally on the device through the apps.

MIH Tool – basic edition

HTTPWatch Basic – HTTP Sniffer and Debugger

I gave them a try and they’re at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I’m guessing the pro/paid editions of those apps give you more/better features, I confirmed that was the case for HTTPWatch.

Update 7/30/14 – remote Safari debugging that is open source & cross platform

Found this today https://github.com/google/ios-webkit-debug-proxy. Works for Linux, Mac, and Windows support eventually to come. I haven’t tested this out myself though. However, except for tinkering with things, cross platform, and open source. I’d say this option is best when working under Linux. On Mac, better to go with the native support from Apple. And for now, Windows is better with the option presented above with an easy GUI for novices.

Update 8/8/2014 – another Safari remote debug for Windows

Adding on previous update, found a Windows port: https://github.com/artygus/ios-webkit-debug-proxy-win32

Testing with your own environment vs a shared environment

27 May

I do wonder, within QA among all the different organizations/companies, does QA generally test on a shared (test) environment, or have their own testbed environment to work with, or both?

It may be organization/industry specific, as certain fields/areas work better where you have individual testbeds/environments to work with and some are better with a shared environment. The contraints and decision are often based on:

  • resource efficiency/utilization – will people be more productive testing with their own environment or a shared one? Can the environment be shared easily for testing? Is it easy to deploy & manage the environment individually by anyone or is it easier to manage centrally as a shared environment? Cost to deploy individual vs shared environment
  • corporate policy – what are the organization’s IT policy/policies that affect environment setup for testing?
  • test data setup/sharing, reproducibility of bugs – whether better with individual environment or shared
  • codebase sync of test/release branch code with the environments with scheduling/agile in mind – easier with individual vs shared environment
  • hmm…any others that come to mind?

But what’s interesting to me though, is that regardless of the QA test setup, developers will usually have their own environment rather than a “shared” development environment. Why is that? More productive & effective to develop individually before you merge all code to a central codebase & environment for testing? But I could be wrong with this assumption as I’ve not worked at too many places but so far have noticed devs do get their own environments at the places I’ve worked. So perhaps QA should get their own environments too if devs get their own. A hybrid approach can be useful though, shared use environment and individual testbed environments, so you get the best of both, though it does cost more this way.

What are your thoughts on this? I personally prefer the individual environment or hybrid option. It’s nice to have more control of the environment that you test, as long as you are smart & responsible on how you configure and test the system.

From personal experience I can provide the following insight:

  • if the industry/organization deals with hardware, you are likely to get your own testbed environment to configure & manage & test. There may be a shared environment as well where multiple people use it, perhaps in real world type scenario (e.g. PBX phone system with all organization members having an account, phone, and access to that system to test and use what they build themselves)
  • if the industry/organization is about website and/or web applications/services, you are likely to get a shared test environment, individual might not be likely though is awesome if you do get that. The shared environment may or may not be managed by QA, it could be managed by IT, DevOps, or Release Engineering, etc.
technolinchpin

Inspire and spread the power of collaboration

Niraj Bhatt - Architect's Blog

Ruminations on .NET, Architecture & Design

Pete Zybrick

Bell Labs to Big Data

Seek Nuance

Python, technology, Seattle, careers, life, et cetera...

TELLURIUM

New Era of Test Automation

Der Flounder

Seldom updated, occasionally insightful.

The 4T - Trail, Tram, Trolley, Train

Exploring Portland with the 4T

Midnight Musings

Thoughts on making art

Automation Guide

The More You Learn The More You Play...!

The Performance Engineer

Code.Test.Tune.Optimize.

humblesoftwaredev

Thoughts related to software development

Yi Wang's Tech Notes

A blog ported from http://cxwangyi.blogspot.com

Appium Tutorial

Technical…..Practical…..Theoretically Interesting

LinuxMeerkat

I swear! Meerkats can do Linux

PacketsDropped

Requeuing the packets dropped in my memory.

Two cents of software value

Writing. Training. Consulting.