Google Mobile Friendly With Perfecto and Quantum

Guest Blog Post by Amir Rozenberg, Senior Director of Product Management, Perfecto

Google recently announced “Mobile First Indexing”, from Google:

To make our results more useful, we’ve begun experiments to make our index mobile-first. Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results (Source).

More recently they made the Google Mobile-Friendly tool and guidelines available. A very nice interactive version is available here, and images at the bottom of the thread, while there’s also an API (which, thanks to Google, can allow users to exercise first before they code). Google also offers code snippets in several languages.

Notes:

• Google takes a URL and renders it. If you run multiple executions in parallel there’s no point in sending the same URL from every execution because the result would be the same
• Google returns basically “MOBILE_FRIENDLY” or not. Suggest to set the assert on that
• The current API differs from the UI such that it only provides the results for Mobile friendly (and the UI gives also mobile and web page speed). Hopefully, Google adds that to the response 😉
• This will probably not work for internal pages as Google probably doesn’t have a site-to-site secure connection with your network.

 

For developers and testers who do not have time, testing mobile friendliness repeatedly probably will simply not happen. That’s why I integrated Google Mobile-Friendly API into Quantum:

• Added 2 Gherkin commands

// If you navigate directly to this page
Then I check mobileFriendly URL "http://www.nfl.com"

// If you got to this page through clicks
Then I check mobileFriendly current URL

• Added the Gherkin command support (GoogleMobileFriendlyStepsDefs.java)
• And the script example is pretty simple:

@Web
Feature: NFL validate

  @SimpleValidation
  Scenario: Validate NFL
    Given I open browser to webpage "http://www.nfl.com"
    Then I check mobileFriendly current URL
    Then I check mobileFriendly URL "http://www.nfl.com"
    Then I wait "5" seconds to see the text "video"

 

That’s it. Next steps:

• Download/Clone https://github.com/Project-Quantum/GoogleMobileFriendlyTestExample
• Get your Google Mobile-Friendly API key and enter it in resources/Application.properties
• Run testng.xml

 

Ideas for future improvement:

• You can automate the validation such that every click would trigger a check with Google behind the scenes.

---

Just for fun, some more screenshots for detailed analysis for NFL.com: