Revision 302221 of Site Compatibility Testing for Firefox for Android

  • Revision slug: Mozilla/Firefox_for_Android/Compatibility_Testing
  • Revision title: Testing Top Sites for Mobile Gecko Compatibility
  • Revision id: 302221
  • Created:
  • Creator: lmandel
  • Is current revision? No
  • Comment

Revision Content

Overview

Many Web sites serve Firefox for Android different content than that served to other mobile browsers. This content is may be:

  • basic mobile site
  • traditional desktop site
  • WAP (Wireless Application Protocol) site designed for a feature phone
  • touch optimized mobile site that is broken visibly or functionally

This different content is often the result of:

  • Sniffing the target browser’s user agent to send differing content to Firefox for Android
  • Use of non standard (typically Webkit specific) CSS and DOM properties (used within JavaScript)

In the first case, Firefox does not receive good, mobile content. In the second case, Firefox does not recognize the content that it is sent. We refer to these issues as Web compatibility issues as a site that exhibits these issues is not compatible with all browsers.

The mobile Web is like the sea - vast. Our goal, is to open up the mobile Web to all mobile browsers via promotion of standards and best practices.

We need your help to identify sites that do not work well in Firefox by reporting the specific issues that you find in your investigation.

Outlined below are steps that you can follow to identify and report site issues.

Setup

To start, let's set up your hardware and software for compatibility testing.

  1. An Android phone is a prerequisite for testing Firefox for Android. See our list of supported devices for Firefox for Android to ensure that your phone is supported.
  2. Install Firefox for Android from Google Play.
  3. Install the Phony Add-on for Firefox on Android. This add-on lets Firefox for Android pretend to be another browser by changing the identifying information (user-agent) that is sent with each HTTP request.
  4. Set up an account on bugzilla so that you can report issues.

Optional steps:

Compatibility Testing

On to testing. The following steps walk you through the method that Mozilla QA uses for compatibility testing:

  1. Select a site to test.
    • This may be a site that you have already visited and seen that something is off in your daily browser usage.
    • Alternatively, you can select one of the top sites listed on the Are We Compatible Yet report. Sites that have not yet been investigated are shown in white.
  2. Open the site that you selected in Firefox for Android. Test the functionality of the site by exploring different areas of the site. For example, if the site displays articles, pictures, and videos, you should explore all three areas of the site. Click on links, use forms, create accounts, sign in, and question:
    1. Is the site a desktop site? If so, skip to #3 and #4 to determine if Safari on iPhone and the Android browser are served the same desktop content.
    2. Does the site have obvious layout problems? Are elements positioned on top of one another? Is there missing content? Do menus display correctly? Are header background colors correct? Are areas of the page shown correctly? Does the site simply look bad?
  3. Visit the same website using your device’s Android browser, using the same exploration methods in #2, and question:
    1. Is the site a desktop site? Does the content greatly differ than what you saw on Firefox for Android? If so, how is it different? Is it a mobile optimized site?
    2. Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see with Firefox for Android that you do not see in the Android browser?
  4. Make Firefox for Android appear to the site as though it is Safari on iPhone by clicking Menu->Phony and selecting iPhone. (You can try other browsers as well.) After selecting iPhone click Menu->Reload. Visit the same site again and continue with the same exploration methods in #2 and question:
    1. Is the site a desktop site? Does the content greatly differ than what you previously saw in Firefox for Android? If so, how is it different? Is it a mobile optimized site?
    2. Does the site have any layout problems? If so, what are those problems?

Reporting Results

If you find out that the Android Browser or iPhone user agent appears to have been served better mobile optimized content with fewer layout problems than Firefox for Android, then you should report those problems in Bugzilla.

To file a bug on a problem you found while testing, file a bug in the Fennec Native Evangelism component in Bugzilla and provide the following information that may provide useful in investigation:

Component
Set this to Evangelism
Summary
Summarize problem you found on a certain site
Description
Describe the problem, including details such as what you saw in Firefox for Android, what you saw in the Android Browser, and lastly what you saw with the IPhone user agent string. Please also include a summary of the underlying problems.

It is also valuable to attach to the bug a screen capture that identifies and exposes the problem in Firefox for Android from your Android device. Read about creating Android screen captures.

Contact Information

If you have any questions about compatibility testing or want to become involved in Mozilla’s mobile Web compatibility effort, please sign up for the compatibility@lists.mozilla.org mailing list.

Revision Source

<h2 id="Overview">Overview</h2>
<p>Many Web sites serve Firefox for Android different content than that served to other mobile browsers. This content is may be:</p>
<ul>
  <li>basic mobile site</li>
  <li>traditional desktop site</li>
  <li>WAP (Wireless Application Protocol) site designed for a feature phone</li>
  <li>touch optimized mobile site that is broken visibly or functionally</li>
</ul>
<p>This different content is often the result of:</p>
<ul>
  <li>Sniffing the target browser’s user agent to send differing content to Firefox for Android</li>
  <li>Use of non standard (typically Webkit specific) CSS and DOM properties (used within JavaScript)</li>
</ul>
<p>In the first case, Firefox does not receive good, mobile content. In the second case, Firefox does not recognize the content that it is sent. We refer to these issues as Web compatibility issues as a site that exhibits these issues is not compatible with all browsers.</p>
<p>The mobile Web is like the sea - vast. Our goal, is to open up the mobile Web to all mobile browsers via promotion of standards and best practices.</p>
<p>We need your help to identify sites that do not work well in Firefox by reporting the specific issues that you find in your investigation.</p>
<p>Outlined below are steps that you can follow to identify and report site issues.</p>
<h2 id="Setup_Steps">Setup</h2>
<p>To start, let's set up your hardware and software for compatibility testing.</p>
<ol>
  <li>An Android phone is a prerequisite for testing Firefox for Android. See our <a href="http://www.mozilla.org/firefox/mobile/platforms/" title="http://www.mozilla.org/firefox/mobile/platforms/">list of supported devices for Firefox for Android</a> to ensure that your phone is supported.</li>
  <li>Install <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox" title="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox for Android from Google Play</a>.</li>
  <li>Install the <a href="https://addons.mozilla.org/en-US/android/addon/phony/">Phony</a> Add-on for Firefox on Android. This add-on lets Firefox for Android pretend to be another browser by changing the identifying information (user-agent) that is sent with each HTTP request.</li>
  <li><a href="https://bugzilla.mozilla.org/createaccount.cgi" title="https://bugzilla.mozilla.org/createaccount.cgi">Set up an account on bugzilla</a> so that you can report issues.</li>
</ol>
<p><strong>Optional steps:</strong></p>
<ul>
  <li>Install Firefox for Android for a different release channel: <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta" title="https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta">Beta</a>, <a href="http://www.mozilla.org/en-US/mobile/aurora/" title="http://www.mozilla.org/en-US/mobile/aurora/">Aurora</a>, and <a href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nightly</a>.</li>
  <li>You can try to reproduce and debug issues that you discover in Firefox Desktop. Install Firefox for Windows, Linux or Mac OS X and an <a href="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/?src=search" title="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/?src=search">add-on like Phony for the desktop</a>. (See the arcticle<a href="https://developer.mozilla.org/en/Browser_detection_using_the_user_agent"> Browser detection using the user agent</a> for an in-depth explanation about browser user-agents.)</li>
</ul>
<h2 id="Testing_Steps">Compatibility Testing</h2>
<p>On to testing. The following steps walk you through the method that Mozilla QA uses for compatibility testing:</p>
<ol>
  <li>Select a site to test.
    <ul>
      <li>This may be a site that you have already visited and seen that something is off in your daily browser usage.</li>
      <li>Alternatively, you can select one of the top sites listed on the <a href="http://arewecompatibleyet.com" title="http://arewecompatibleyet.com">Are We Compatible Yet report</a>. Sites that have not yet been investigated are shown in white.</li>
    </ul>
  </li>
  <li>Open the site that you selected in Firefox for Android. Test the functionality of the site by exploring different areas of the site. For example, if the site displays articles, pictures, and videos, you should explore all three areas of the site. Click on links, use forms, create accounts, sign in, and question:
    <ol>
      <li>Is the site a desktop site? If so, skip to #3 and #4 to determine if Safari on iPhone and the Android browser are served the same desktop content.</li>
      <li>Does the site have obvious layout problems? Are elements positioned on top of one another? Is there missing content? Do menus display correctly? Are header background colors correct? Are areas of the page shown correctly? Does the site simply look bad?</li>
    </ol>
  </li>
  <li>Visit the same website using your device’s Android browser, using the same exploration methods in #2, and question:
    <ol>
      <li>Is the site a desktop site? Does the content greatly differ than what you saw on Firefox for Android? If so, how is it different? Is it a mobile optimized site?</li>
      <li>Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see with Firefox for Android that you do not see in the Android browser?</li>
    </ol>
  </li>
  <li>Make Firefox for Android appear to the site as though it is Safari on iPhone by clicking Menu-&gt;Phony and selecting iPhone. (You can try other browsers as well.) After selecting iPhone click Menu-&gt;Reload. Visit the same site again and continue with the same exploration methods in #2 and question:
    <ol>
      <li>Is the site a desktop site? Does the content greatly differ than what you previously saw in Firefox for Android? If so, how is it different? Is it a mobile optimized site?</li>
      <li>Does the site have any layout problems? If so, what are those problems?</li>
    </ol>
  </li>
</ol>
<h2 id="Reporting_Results">Reporting Results</h2>
<p>If you find out that the Android Browser or iPhone user agent appears to have been served better mobile optimized content with fewer layout problems than Firefox for Android, then you should report those problems in Bugzilla.<br />
  <br />
  To file a bug on a problem you found while testing, file a bug in the <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Fennec%20Native">Fennec Native Evangelism component</a> in Bugzilla and provide the following information that may provide useful in investigation:</p>
<dl>
  <dt>
    Component</dt>
  <dd>
    Set this to Evangelism</dd>
  <dt>
    Summary</dt>
  <dd>
    Summarize problem you found on a certain site</dd>
  <dt>
    Description</dt>
  <dd>
    Describe the problem, including details such as what you saw in Firefox for Android, what you saw in the Android Browser, and lastly what you saw with the IPhone user agent string. Please also include a summary of the underlying problems.</dd>
</dl>
<ul>
</ul>
<p>It is also valuable to attach to the bug a screen capture that identifies and exposes the problem in Firefox for Android from your Android device. Read about <a href="http://developer.android.com/tools/debugging/ddms.html" title="http://developer.android.com/tools/debugging/ddms.html">creating Android screen captures</a>.</p>
<h2 id="Contact_Information">Contact Information</h2>
<p>If you have any questions about compatibility testing or want to become involved in Mozilla’s mobile Web compatibility effort, please sign up for the <a href="https://lists.mozilla.org/listinfo/compatibility">compatibility@lists.mozilla.org</a> mailing list.</p>
Revert to this revision