Address behaviour changes in responsive mode

In the previous section, we learned about running tests in responsive mode. Ekam makes it simple to bring up chrome to test applications in responsive mode.

Failing Test#

Application’s behavior could change, due to its responsive nature. Because of this change in behavior the test we authored fails in responsive mode.

When we execute the GoogleSearchTest - It fails as the “Google Search” button does not exist in responsive view.

Here is the code:

@Test(groups = "web")
public void shouldDoGoogleSearch() {

    String title = Page(GoogleHomePage.class)
            .search("TestVagrant")
            .getTitle();

    assertEquals(title, "TestVagrant - Google Search");

}

public class GoogleHomePage extends WebPage {

    protected By searchBox = queryByName("q");
    protected By searchButton = query("input[value='Google Search']");

    @WebStep(keyword = "When", description = "I hit search button")
    public GoogleHomePage search(String text) {

        textbox(searchBox).setText(text);
        element(searchButton).click();
        return this;
    }
    
    @WebStep(keyword = "And", description = "I return Title")
    public String getTitle() {

        return driver.getTitle();
    }
}

The test would fail with the below exception

java.lang.RuntimeException: Error waiting for element presence with selector: By.cssSelector: input[value='Google Search'].
	at com.testvagrant.ekam.atoms.web.Element.waitUntilPresent(Element.java:118)

Solution#

Ekam provides a mechanism to override the behavior so that with minimum changes, the test would work on responsive mode too.

Here are the steps:

1. In the previous section, we learned to create a web feed for responsive. responsive.webfeed.json

2. In the previous section, we also created config responsive.properties

3. Override & Provide new implementation for search behavior

4. Mention the new implementation of behavior in base class

5. Execute test

Web Feed#

{
  "desiredCapabilities": {
  },
  "arguments": [
  ],
  "preferences": {
  },
  "extensions": [
  ],
  "experimentalOptions": {
    "mobileEmulation": {
      "deviceName" : "iPhone 7"
    }
  }
}

Config#

Specify web.target as responsive

# Web Config

# Target Browser. Supported values <any | chrome | firefox | msedge | responsive>
web.target: responsive

# Feed file having desiredCapabilities, arguments etc
web.feed: responsive.webfeed

Provide new implementation for search behavior#

Create a class called GoogleHomeView extending from GoogleHomePage as shown below:

Override search method and provide new implementation/behavior

package ekam.example.web.page;
import com.testvagrant.ekam.reports.annotations.WebStep;
import org.openqa.selenium.Keys;

public class GoogleHomeView extends GoogleHomePage {

    @WebStep(keyword = "When", description = "I hit search button")
    public GoogleHomeView search(String text) {

        textbox(searchBox).setText(text);
        textbox(searchBox).getElement().sendKeys(Keys.ENTER);
        return this;
    }
}

Mention the new implementation of behavior in the base class#

Now it GoogleHomePage class’s search method mention that there is a class specifying implementation for responsive nature

@WebSwitchView(view = GoogleHomeView.class)

The above line indicates that behavior has been overridden in GoogleHomeView.class

Note: searchBox is made protected so that it is available to derived class - in this case GoogleHomeView.class

public class GoogleHomePage extends WebPage {

    protected By searchBox = queryByName("q");
    private By searchButton = query("input[value='Google Search']");

    @WebSwitchView(view = GoogleHomeView.class)
    @WebStep(keyword = "When", description = "I hit search button")
    public GoogleHomePage search(String text) {

        textbox(searchBox).setText(text);
        element(searchButton).click();
        return this;
    }
        
    @WebStep(keyword = "And", description = "I return Title")
    public String getTitle() {

        return driver.getTitle();
    }
}

Execute your test with gradle:#

./gradlew clean runWebTests -Dconfig=responsive

Hurray !! A single GoogleSearchTest - can now execute in both responsive and normal mode.

In absence of Ekam, this was handled by

Creating a repo for desktop browser and another repo for responsive

or Authoring two different tests - one for desktop browser and one for responsive

With Ekam, now you can author test once and execute twice !!