Responsive Web Design (RWD)

As more people are started using mobile devices, like Smartphone’s and tablets, for every task that used to be only capable on desktop, one thing has become clear: mobile is taking over Internet surfing. And, it's not even just surfing. It's everything from browsing social media outlets, checking emails and doing some online shopping.

Because mobile Internet usage is increasing rapidly, it's extremely important that your website is mobile friendly. Usually this isn't a major concern. You have a website designed for desktop users and another site specifically developed for mobile users. But, is it possible to have a site that is equally favourable for both desktop and mobile users?

There actually is a design that can handle both types of users. And it's called responsive web design.

What is responsive web design?

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). In other words, with a responsive website design, you don't have to have worry about having different websites for various devices or making sure that your site runs properly on a mobile device

Why responsive web design?

Mobile First

·         Sites used to be designed for desktop users first. Mobile versions were for too minimal and had a very small functional experience. When a team designs the site for mobile first, the end result in the experience is focused on the key tasks users want to be able to accomplish when viewing your website.

Some other Benefits

·         Responsive sites work well across many existing devices on the market and should be a safe bet that it will be this way for a considerable time to come.

·         When you optimize your site no matter what the end user decides to view it on will make their life easier. Happier customers make for happier business.

·         Mobile Responsive sites take a bit longer to design and develop, but they survive longer however management, upgrades and support only need to be applied to a single place. This will save time and money.

·         Managing SEO for separate desktops and mobile sites is hard and it does not produce as great of results. Google recommends a responsive approach. Consolidating the view of your results means more focus.

·         Having your site consistent and optimized no matter what platform you are using to view it from, will provide a better experience to the user which in turn will lead them to engage with you than deciding to go elsewhere.

Which device and browsers should I test?

ü  Look at the client traffic on the services today

ü  Remember 80/20 – focus on the 20% that produce 80% of the traffic.

ü  Expect changes if you move from static pages to responsive

ü  Statistics in region and the market

ü  What's hot - on the way in the market - what's on the way out

ü  The type of device, the screen factors (size, dpi, quality) and the performance

ü  The OS and statistics from different sources

Apple devices - you can find information about the most popular here

Android devices - you can find information about the most popular here

How to test mobile/responsive Website?

ü  Synchronized Testing:

Synchronized testing is an efficient way to automatically perform the same action across a variety of browsers and devices simultaneously.

Tools like:

Gost lab

ü  Web-Based Services:

Web-based services offer the ability to test your site across a massive collection of mobile OS and browser combinations.

Tools like:

Browserstack and crossbrowser testing.com

ü  Viewport Resizers:

Viewport resizer is a browser-based tool to test any website's responsiveness. Once you activate the bookmarklet you have a series of predefined device icons that appear along the top of the browser to just between viewports.

ü  Browser Developers tools:

Google Chrome’s DevTools has a feature called device mode that’s loaded with helpful tools for testing and debugging responsive designs.

Unlike most other responsive design testing tools which simply resize your viewport, device mode actually emulates the mobile device experience, particularly touchscreen interactions like tapping and swiping, right in your web browser.

The tools features are:

·         Test your responsive designs by emulating different screen sizes and resolutions, including Retina displays.

·         Evaluate your site’s performance using the network emulator, without affecting traffic to other tabs.

ü  Simulator & Emulators:

A mobile emulator is a web-based simulation of how websites and applications will appear and function in a mobile environment.

What need to be tested?

ü  The flow and the stories – the communication with the user

ü  The GUI (presentation) and functions

ü  Difference desktop and mobile users

ü  Mobile users are in different situations and on the move

ü  Smaller screens, light and contrast

ü  Use of swipe, keyboard and mouse

ü  Different functions for different situations

ü  Security

ü  Robustness, stability and speed

ü  Data quality and communication with other systems

Common Gotcha's

ü  Landscape to portrait to landscape

ü  Drop downs

The problem though occurs if you have long selectable items on your drop downs, For example, consider a list of security questions

·         What was the name of your first Company?

·         What was the name of your favorite film?

·         What was the name of your junior school?

All these will truncate the questions, so all the user will see is "What was the ...".  There's really no solution for this, but rethinking the approach/redesign.

ü  Pop ups

Found any kind of required pop ups from a browser can be a little troublesome on mobile devices. This can include,

·         Are you sure you want to continue?

·         Read these terms and conditions.

·         Select a date from this calendar

Finally

ü  Decide how your web application is used. You can get a great wealth of information from Google Analytics tool to see which devices your customers use to reach your website

ü  From the analytics, narrow down your choice of device testing to target the majority, i.e. make sure your website works for majority of people as there is no practical way to test on every device combination.

Utilize automated tools and emulators to do the basic checks and high-level functional testing and combine that with real device manual testing

Switching frame using WebDriver

public class paytm {
WebDriver driver= new FirefoxDriver();
  @Test
  public void f() {
 driver.findElement(By.xpath(".//*[@id='logo-bar']/div[1]/ul/li[1]/a")).click();
 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
 driver.switchTo().frame(1);
 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
 driver.findElement(By.xpath("//*[@id='loginForm']/div[2]/input")).sendKeys("abc@gmail.com");
      
  }
  @BeforeTest
  public void beforeTest() {
 driver.get("http://paytm.com/");
 driver.manage().window().maximize();

  }

  @AfterTest
  public void afterTest() {
 driver.close();
  }

}

Data Driven testing Using POI

Scenario:

• Launch the website
• login with the credentials
• create 1000 records by retrieving the  test data from an excel file

Below is the Code:

public class MyCollection_AddObject {

WebDriver driver;

  @Test

  public void AddObject() throws IOException, InterruptedException {

 

 FileInputStream fis= new FileInputStream("D://Rakesh Chityala//Selenium Automation//Test Data//Collectrium Add Object.xls");

 HSSFWorkbook wb= new HSSFWorkbook(fis);

 HSSFSheet s=wb.getSheetAt(0);  

 driver.findElement(By.xpath("//a[@title='My Collection']")).click();  

 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

 for (int i = 1; i <= s.getLastRowNum(); i++) {

 System.out.println("i values is:" +i);

 //System.out.println("Number of rows are: "+s.getLastRowNum());

 //System.out.println("<------------------------------entered for loop-------------------->"+i+ " No.rows found : " +s.getLastRowNum());

 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

 driver.findElement(By.xpath("//div[5]/div/button[3]")).click();

 driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);

 for (String winHandle : driver.getWindowHandles()) {

   driver.switchTo().window(winHandle); // switch focus of WebDriver to the next found window handle (that's your newly opened window)

}  

 driver.findElement(By.xpath("(//input[@type='text'])[1]")).sendKeys(s.getRow(i).getCell(0).getStringCellValue());

 driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);

 driver.findElement(By.xpath("//div[3]/button")).click();

 WebElement logo = (new WebDriverWait(driver, 60))

   .until(ExpectedConditions.elementToBeClickable(By.xpath("//div[5]/div/button[3]")));

 

 }

 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

 

  }

  @BeforeTest

  public void beforeTest() {

 driver= new FirefoxDriver();

 driver.get("https://url.com");

 driver.manage().window().maximize();

 WebElement myDynamicElement = (new WebDriverWait(driver, 10))

   .until(ExpectedConditions.presenceOfElementLocated(By.id("ember443")));

 driver.findElement(By.id("ember443")).sendKeys("XXXX");

 driver.findElement(By.id("ember446")).sendKeys("XXXX!");

 driver.findElement(By.id("ember434")).click();

 driver.manage().timeouts().pageLoadTimeout(60, TimeUnit.SECONDS);

 WebElement logo = (new WebDriverWait(driver, 60))

   .until(ExpectedConditions.presenceOfElementLocated(By.xpath("//a[@title='My Collection']")));

  }

  @AfterTest

  public void afterTest() {

  }

}

Right Click Action Using Selenium WebDriver

Sceanrio:

• Launch the browser
• Navigate to google.com
• right click on google page
• Click on View page source 

Below is the code:

public class rightClick {

WebDriver driver;

  @Test

  public void f() {

 WebElement searchButton= driver.findElement(By.name("btnK"));

 Actions action=new Actions(driver);

 action.contextClick(searchButton).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).perform();

 //action.contextClick(searchButton).build().perform();  

 

 //action.contextClick(viewPort).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).perform();

 

  }

  @BeforeTest

  public void beforeTest() {

 driver=new FirefoxDriver();

 driver.get("http://google.co.in");

 driver.manage().window().maximize();

  }

  @AfterTest

  public void afterTest() {

 driver.close();

  }

}

How to Configure Appium

Prerequisite to use APPIUM:

1. ANDROID SDK :
1. Go to following URL https://developer.android.com/sdk/installing/index.html
2. Select Stand-alone SDK tools

3. Click Download SDK now

4. Based on Platform we need to select the file (mine is windows, so downloading .exe)

5. Accept the terms and conditions and click on Download

6. It will automatically start download file as mentioned below

7. Open containing file of downloaded file

8. Double click on installation file and Follow the mentioned in the dialogue box

After clicking the finish button it will open the SDK Manger

 

9. Select the required tools and API versions to click on Install packages to Install

2. JDK (Java Development Kit) [Link]:

Make sure java has been installed in you machines. Along with java path in environment variables.

3. Eclipse [Link]

Create a project

File → New → Java Project → Enter Project Name → Click on Finish

Make Sure JRE version has been picked by default in the JRE section

Right click on Project Name → New → Package

Enter package name and Click on Finish

Right click on package → New → Class

Enter Class Name and Click on Finish

4. TestNG [Link]:

1. Select Help / Install new software.
2. Search for new features to install.
3. New remote site.
4. For Eclipse 3.4 and above, enter http://beust.com/eclipse.
5. For Eclipse 3.3 and below, enter http://beust.com/eclipse1.
6. Make sure the check box next to URL is checked and click Next.
7. Eclipse will then guide you through the process.
8. After successful installation of TestNG, we create TestNG class

Expand the a project → Right click on a class → New  → Other

Select Test NG class → Click on Next

Enter Class name and Select the Annotation, Click on Finish

5. Selenium Server JAR [Link]
1. Download selenium server jar from the selenium
2. Add this jar files to the respective project

How to Add Jars

1. Right click on a project → Build path → Configure Build path

Click on Add external Jars

Select Selenium server and Selenium Java jars (which we can download from http://www.seleniumhq.org/download/)

Click on ‘Open ’ after selecting the jar and Click on ‘Ok’

6. Webdriver Language Binding Library [Link]
1. Download the webdriver jar and add it to the current project
7. APPIUM For Windows [Link]

Download appium here

Click on Download Appium, It will automatically start downloading Appium for windows

Extract the file from file and install the server by double clicking the ‘appium-installer.exe’

8. How to work with emulators:

Installing Eclipse plug-in click Here

Make sure URL whuch was provided in preferences is matching to where SDK file has been installed.

Window → preferences

After successful installation SDK Manager and AVD icons will be displayed

SDK Manager : It is used manage the API

AVD: Used to create the Virtual devices

9. Download Appium jar (java) files click here  and Add to the corresponding project

10. Set Android Home:

set ANDROID_HOME=C:\<installation location>\android-sdks

set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

If everything is done perfectly then it will open SDK Manager when we type ‘android’ from cmd

11. Prerequisites to write Appium Code:
1. Make sure Android SDK has been installed and Path has been set  in environment variables
2. Libraries of both selenium and Appium has been Added  into the project
3. Appium.exe Must be installed in machine
4. Need to start the server before executing the appium program
5. UI Automator: To locate the elements

12. UI Automator:
1. To analyse the UI components of the application that you want to test, perform the following steps after installing the application given in the example.

• Connect your Android device/open emulator to your development machine
• Open a terminal window and navigate to <android-sdk>/tools/  and Run the tool with this command

2. You will see the following window appear. It is the default window of the UI Automator Viewer.

3. Open AUT and Click on device icon at the top right corner

4. It will start taking the UI XML snapshot of the screen currently opened in the device. It would be something like this.

5. After that, you will see the snapshot of your device screen in the uiautomatorviewer window.

6. Need to move the cursor and  click on a particular element to  identify the elements properties

13. Identifying activity name packagename using  apk file

Method 1:

APK App Info On Google Play [Link]

Method 2:

Step1: Start "adb logcat" in command prompt.

Step2: Open the app (either in emulator or real device) 

In the above image Activity Name is : com.android.calculator2.Calculator

Package name will be: com.android.calculator2

Method 3:

1. Open SDK folder and go to build-tools folder.
2. Open any folder (example: 21.1.2).
3. Open a command prompt window in this folder ( Shift+ right click – Open command window here).
4. Run command “aapt list -a “path_to_apk_we_need_to_test”  >manifest.txt” ( this command will write the app manifest in manifest.txt file inside the same folder).
5. Open the manifest.txt txt file.
6. At the beginning of the file there should be details about the package including name ( example: com.example.android.contactmanager).
7. At the end of the file there should be details about activity including name ( example: ContactManager).

Method 4:

We can get package name from the play store URL

14. Node.js (Not Required - Whenever Appium server is installed, it by default comes with "Node.exe" & NPM. It's included in Current version of Appium.)
15. Required capabilities before writing the appium code:
1. Dev ice name

capabilities.setCapability("deviceName","Emulator");

2. Platform name

capabilities.setCapability("platformName","Android");

3. Package name

capabilities.setCapability("appPackage", "com.android.calculator2");

4. Activity Name

capabilities.setCapability("appActivity","com.android.calculator2.Calculator");

5. Connect with appium serve r using the URL

driver = new RemoteWebDriver(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

16. Sample Appium code:

package appiumPakage;

import java.net.MalformedURLException;

import java.net.URL;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

//import org.openqa.selenium.remote.CapabilityType;

import org.openqa.selenium.remote.DesiredCapabilities;

import org.openqa.selenium.remote.RemoteWebDriver;

import org.testng.annotations.*;

public class Calculator {

WebDriver driver;

@BeforeClass

public void setUp() throws MalformedURLException{

//Set up desired capabilities and pass the Android app-activity and app-package to Appium

DesiredCapabilities capabilities = new DesiredCapabilities();

//capabilities.setCapability("BROWSER_NAME", "Android");

//capabilities.setCapability("VERSION", "4.4.2");

capabilities.setCapability("deviceName","Emulator");

capabilities.setCapability("platformName","Android");   

  capabilities.setCapability("appPackage", "com.android.calculator2");

// This package name of your app (you can get it from apk info app)

capabilities.setCapability("appActivity","com.android.calculator2.Calculator"); // This is Launcher activity of your app (you can get it from apk info app)

//It will launch the Calculator App in Android Device using the configurations specified in Desired Capabilities

//Create RemoteWebDriver instance and connect to the Appium server

  driver = new RemoteWebDriver(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

}

@Test

public void testCal() throws Exception {

  //locate the Text on the calculator by using By.name()

  WebElement two=driver.findElement(By.name("2"));

  two.click();

  WebElement plus=driver.findElement(By.name("+"));

  plus.click();

  WebElement four=driver.findElement(By.name("4"));

  four.click();

  WebElement equalTo=driver.findElement(By.name("="));

  equalTo.click();

  //locate the edit box of the calculator by using By.tagName()

  WebElement results=driver.findElement(By.className("android.widget.EditText"));

//Check the calculated value on the edit box

assert results.getText().equals("6"):"Actual value is : "+results.getText()+" did not match with expected value: 6";

}

@AfterClass

public void teardown(){

//close the app

driver.quit();

}

}