mozilla

Revision 373789 of Tester la compatibilité des sites avec Firefox pour Android

  • Raccourci de la révision : Mozilla/Firefox_pour_Android/Test_Compatibilite
  • Titre de la révision : Tester la compatibilité des sites avec Firefox pour Android
  • ID de la révision : 373789
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

Notre objectif est d'ouvrir le Web mobile à tous les navigateurs mobiles à travers la promotion des standards et des bonnes pratiques. Cependant, de nombreux sites servent à Firefox pour Android, un contenu qui ne fonctionne pas bien ou qui est différent de celui pour les autres navigateurs mobiles. Ce contenu peut être :

  • Un site mobile basique
  • Un site traditionnel pour ordinateur de bureau
  • Un site WAP (Wireless Application Protocol) conçu pour les téléphones non smart-phones
  • Un site mobile optimisé pour le tactile qui est cassé dans son apparence ou ses fonctionnalités.

Nous désignons cette catégorie de problèmes, comme des problèmes de compatibilité Web. Les problèmes de compatibilité Web sont principalement issues d'une ou plusieurs des causes suivantes :

Détection de l'agent utilisateur (UA-sniffing)
Identifier le navigateur par sa chaîne d'agent utilisateur (user-agent) et envoyer un contenu différent à Firefox pour Android
Utiliser des propriétés CSS non standards (principalement Webkit)
Utiliser des propriétés CSS non standard que Firefox ne reconnaît pas, causant des problèmes de mise en page et de style
Utiliser des propriétés DOM non standard (principalement Webkit)
Utiliser des propriétés DOM non standards en JavaScript que Firefox ne reconnaît pas, causant des problèmes fonctionnels
Limitation navigateur
Utiliser des propriétés standards CSS et DOM que Firefox pour Android ne reconnaît pas actuellement, ou qui posent des problèmes fonctionnels ou de performance.

Nous avons besoin de votre aide pour identifier les sites qui ne fonctionnent pas bien dans Firefox, en signalant les problèmes spécifiques que vous avez trouvé lors de votre enquête.

Ci-dessous, sont détaillées les étapes que vous pouvez suivre pour identifier et signaler les sites problématiques.

Préparation

Pour démarrer, préparons notre matériel et nos logiciels pour des tests de compatibilité.

  1. Un téléphone Android est un pré-requis pour tester Firefox pour Android. Assurez-vous que votre téléphone est supporté en consultant la liste des appareils supportés par Firefox pour Android.
  2. Installer Firefox pour Android depuis Google Play.
  3. Installer l'add-on Phony pour Firefox pour Android. Cet add-on permet de faire passer Firefox pour Android pour un autre navigateur en changer sa chaîne agent utilisateur par celui d'un autre navigateur pour chaque requête HTTP.
  4. Créer un compte sur Bugzilla pour que vous puissiez signaler les problèmes rencontrés.

Étapes facultatives :

  • Installer Firefox pour Android pour un autre canal de distribution : Beta, Aurora et Nightly.
  • Vous pouvez essayer de reproduire et débugger les problèmes que vous avez découvert, dans Firefox pour ordinateur de bureau. Installer Firefox sur Windows, Linux ou Mac OS X et un add-on comme Phony pour ordinateur.

Note : Voir l'article Détection du navigateur par l'agent-utilisateur pour explication en détails sur les agent-utilisateurs des navigateurs.

Compatibility 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 already visited and saw that something is wrong 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. 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

For any site that looks or functions differently in Firefox for Android, the Android browser, or Safari on iPhone you should report each issue in Bugzilla. To report an issue, file a bug in the Firefox for Android Evangelism component and provide as much information about the issue as you can. Here are some pieces of information that are typically helpful to submit with your report:

Summary
Summarize the issue that you have identified with the site. It is helpful to include the domain name, such as mozilla.org, in the summary.
Description
Describe the issue as best as you can. Include details such as how the content differs between Firefox for Android, Android browser, and Safari on iPhone, the specific places (titles, article list, options menu) where the site does not look correct, and what parts of the site (articles are unreadable, videos don't play, can't click on links) that do not function as you expected that they would.

If you have some knowledge of HTML, CSS, and JavaScript, it is also very helpful to have references to the lines of code that are the root cause of the issue.
Attachments
It is also valuable to attach a screen capture that shows the problem in Firefox for Android. How to take a screenshot on Android differs based on your version of the operating system.

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.

Source de la révision

<h2 id="Overview">Résumé</h2>
<p>Notre objectif est d'ouvrir le Web mobile à tous les navigateurs mobiles à travers la promotion des standards et des bonnes pratiques. Cependant, de nombreux sites servent à Firefox pour Android, un contenu qui ne fonctionne pas bien ou qui est différent de celui pour les autres navigateurs mobiles. Ce contenu peut être :</p>
<ul>
  <li>Un site mobile basique</li>
  <li>Un site traditionnel pour ordinateur de bureau</li>
  <li>Un site WAP (Wireless Application Protocol) conçu pour les téléphones non smart-phones</li>
  <li>Un site mobile optimisé pour le tactile qui est cassé dans son apparence ou ses fonctionnalités.</li>
</ul>
<p>Nous désignons cette catégorie de problèmes, comme des problèmes de compatibilité Web. Les problèmes de compatibilité Web sont principalement issues d'une ou plusieurs des causes suivantes :</p>
<dl>
  <dt>
    Détection de l'agent utilisateur (UA-sniffing)</dt>
  <dd>
    Identifier le navigateur par sa chaîne d'agent utilisateur (user-agent) et envoyer un contenu différent à Firefox pour Android</dd>
  <dt>
    Utiliser des propriétés CSS non standards (principalement Webkit)</dt>
  <dd>
    Utiliser des propriétés CSS non standard que Firefox ne reconnaît pas, causant des problèmes de mise en page et de style</dd>
  <dt>
    Utiliser des propriétés DOM non standard (principalement Webkit)</dt>
  <dd>
    Utiliser des propriétés DOM non standards en JavaScript que Firefox ne reconnaît pas, causant des problèmes fonctionnels</dd>
  <dt>
    Limitation navigateur</dt>
  <dd>
    Utiliser des propriétés standards CSS et DOM que Firefox pour Android ne reconnaît pas actuellement, ou qui posent des problèmes fonctionnels ou de performance.</dd>
</dl>
<p>Nous avons besoin de votre aide pour identifier les sites qui ne fonctionnent pas bien dans Firefox, en signalant les problèmes spécifiques que vous avez trouvé lors de votre enquête.</p>
<p>Ci-dessous, sont détaillées les étapes que vous pouvez suivre pour identifier et signaler les sites problématiques.</p>
<h2 id="Setup">Préparation</h2>
<p>Pour démarrer, préparons notre matériel et nos logiciels pour des tests de compatibilité.</p>
<ol>
  <li>Un téléphone Android est un pré-requis pour tester Firefox pour Android. Assurez-vous que votre téléphone est supporté en consultant la <a href="http://www.mozilla.org/en-US/firefox/mobile/platforms/" title="http://www.mozilla.org/en-US/firefox/mobile/platforms/">liste des appareils supportés par Firefox pour Android</a>.</li>
  <li>Installer <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 pour Android depuis Google Play</a>.</li>
  <li>Installer l'add-on <a href="https://addons.mozilla.org/fr/android/addon/phony/" title="https://addons.mozilla.org/fr/android/addon/phony/">Phony</a> pour Firefox pour Android. Cet add-on permet de faire passer Firefox pour Android pour un autre navigateur en changer sa chaîne <a href="/en-US/docs/Browser_detection_using_the_user_agent" title="/en-US/docs/Browser_detection_using_the_user_agent">agent utilisateur</a> par celui d'un autre navigateur pour chaque requête HTTP.</li>
  <li><a href="https://bugzilla.mozilla.org/createaccount.cgi" title="https://bugzilla.mozilla.org/createaccount.cgi">Créer un compte sur Bugzilla</a> pour que vous puissiez signaler les problèmes rencontrés.</li>
</ol>
<p><strong>Étapes facultatives :</strong></p>
<ul>
  <li>Installer Firefox pour Android pour un autre canal de distribution : <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> et <a href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nightly</a>.</li>
  <li>Vous pouvez essayer de reproduire et débugger les problèmes que vous avez découvert, dans Firefox pour ordinateur de bureau. Installer Firefox sur Windows, Linux ou Mac OS X et un <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/? data-cke-saved-src=search src=search">add-on comme Phony pour ordinateur</a>.</li>
</ul>
<div class="note">
  <p><strong>Note :</strong> Voir l'article <a href="/en-US/docs/Browser_detection_using_the_user_agent" title="/en-US/docs/Browser_detection_using_the_user_agent">Détection du navigateur par l'agent-utilisateur</a> pour explication en détails sur les agent-utilisateurs des navigateurs.</p>
</div>
<h2 id="Compatibility_Testing">Compatibility Testing</h2>
<p>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 already visited and saw that something is wrong 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?<br />
        &nbsp;</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?<br />
        &nbsp;</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. 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>For any site that looks or functions differently in Firefox for Android, the Android browser, or Safari on iPhone you should report each issue in Bugzilla. To report an issue, file a bug in the <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20for%20Android&amp;component=Evangelism&amp;rep_platform=ARM&amp;op_sys=Android">Firefox for Android Evangelism component</a> and provide as much information about the issue as you can. Here are some pieces of information that are typically helpful to submit with your report:</p>
<dl>
</dl>
<dl>
  <dt>
    Summary</dt>
  <dd>
    Summarize the issue that you have identified with the site. It is helpful to include the domain name, such as mozilla.org, in the summary.</dd>
  <dt>
    Description</dt>
  <dd>
    Describe the issue as best as you can. Include details such as how the content differs between Firefox for Android, Android browser, and Safari on iPhone, the specific places (titles, article list, options menu) where the site does not look correct, and what parts of the site (articles are unreadable, videos don't play, can't click on links) that do not function as you expected that they would.<br />
    <br />
    If you have some knowledge of HTML, CSS, and JavaScript, it is also very helpful to have references to the lines of code that are the root cause of the issue.</dd>
  <dt>
    Attachments</dt>
  <dd>
    It is also valuable to attach a screen capture that shows the problem in Firefox for Android. How to take a screenshot on Android differs based on your version of the operating system.</dd>
</dl>
<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>
Revenir à cette révision