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 : 373807
  • 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.

Tester la compatibilité

Les étapes suivantes vous guideront selon la méthodologie utilisée par Mozilla AQ (Assurance Qualité) lors des tests de compatibilité :

  1. Choisissez un site à tester.
    • Il peut s'agir d'un site que vous avez déjà visité et sur lequel vous avez constaté un problème lors de vos navigations quotidiennes.
    • Sinon, vous pouvez choisir un des principaux sites listés dans le rapport Are We Compatible Yet. Les sites qui n'ont pas été analysés sont affichés en blanc.
  2. Ouvrez le site que vous avez choisi avec Firefox pour Android. Testez son fonctionnement en explorant les différentes parties du site. Par exemple, si le site affiche des articles, des photos, et des vidéos, vous pouvez explorer ces trois parties du site. Cliquez sur les liens, utilisez les formulaires, créez des comptes, identifiez-vous, et posez les questions :
    1. Est-ce que ce site est pour ordinateur de bureau ? Si oui, sautez directement au point 3 ou 4 pour déterminer si Safari sur iPhone et le navigateur d'Android reçoivent le même contenu.
    2. Est-ce que le site a de flagrants problèmes de mise en page ? Est-ce que les éléments sont positionnées les uns sur les autres ? Est-ce qu'il manque du contenu ? Est-ce que les menus sont correctement affichés ? Est-ce que les couleurs de fonds de l'entête sont correctes ? Est-ce que certaines zones de la page sont affichées correctement ? Est-ce que le site apparaît tout simplement cassé, ou mal ?
    ac
  3. Visitez le même site web en utilisant le navigateur de votre appareil Android, et en utilisant la même méthode d'exploration que pour le point 2, et posez les questions :
    1. Est ce que ce site est pour ordinateur de bureau ? Est-ce que le contenu change fortement avec ce que vous avez vu sur Firefox pour Android ? Si oui, comment était-ce différent ? S'agit'il d'un site optimisé pour mobile ?
    2. Y-a t'il les mêmes problèmes de mise en page que ceux constatés sur Firefox pour Android ? Si oui, quels problèmes avez-vous vu sous Firefox pour Android qui ne sont plus là avec le navigateur d'Android ?
  4. Faîtes apparaître Firefox pour Android aux yeux du site, comme s'il s'agissait de Safari sur iPhone, en cliquant sur Menu -> Phony et en choisissant iPhone. Après avoir sélectionné iPhone, cliquez sur Menu -> Recharger. Visitez le même site une nouvelle fois et continuez la même méthode d'exploration que pour le point 2, et posez les questions :
    1. Est ce que ce site est pour ordinateur de bureau ? Est-ce que le contenu change fortement avec ce que vous avez vu sur Firefox pour Android ? Si oui, s'agit'il d'un site optimisé pour mobile ?
    2. Y a t'il des problèmes de mise en page ? Si oui, quels sont ces problèmes ?

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="R.C3.A9sum.C3.A9">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="Pr.C3.A9paration">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">Tester la compatibilité</h2>
<p>Les étapes suivantes vous guideront selon la méthodologie utilisée par Mozilla AQ (Assurance Qualité) lors des tests de compatibilité :</p>
<ol>
  <li>Choisissez un site à tester.
    <ul>
      <li>Il peut s'agir d'un site que vous avez déjà visité et sur lequel vous avez constaté un problème lors de vos navigations quotidiennes.</li>
      <li>Sinon, vous pouvez choisir un des principaux sites listés dans le <a href="http://people.mozilla.org/~lmandel/arewecompatibleyet/" title="http://people.mozilla.org/~lmandel/arewecompatibleyet/">rapport Are We Compatible Yet</a>. Les sites qui n'ont pas été analysés sont affichés en blanc.</li>
    </ul>
  </li>
  <li>Ouvrez le site que vous avez choisi avec Firefox pour Android. Testez son fonctionnement en explorant les différentes parties du site. Par exemple, si le site affiche des articles, des photos, et des vidéos, vous pouvez explorer ces trois parties du site. Cliquez sur les liens, utilisez les formulaires, créez des comptes, identifiez-vous, et posez les questions :
    <ol>
      <li>Est-ce que ce site est pour ordinateur de bureau ? Si oui, sautez directement au point 3 ou 4 pour déterminer si Safari sur iPhone et le navigateur d'Android reçoivent le même contenu.</li>
      <li>Est-ce que le site a de flagrants problèmes de mise en page ? Est-ce que les éléments sont positionnées les uns sur les autres ? Est-ce qu'il manque du contenu ? Est-ce que les menus sont correctement affichés ? Est-ce que les couleurs de fonds de l'entête sont correctes ? Est-ce que certaines zones de la page sont affichées correctement ? Est-ce que le site apparaît tout simplement cassé, ou mal ?</li>
    </ol>
    ac</li>
  <li>Visitez le même site web en utilisant le navigateur de votre appareil Android, et en utilisant la même méthode d'exploration que pour le point 2, et posez les questions :
    <ol>
      <li>Est ce que ce site est pour ordinateur de bureau ? Est-ce que le contenu change fortement avec ce que vous avez vu sur Firefox pour Android ? Si oui, comment était-ce différent ? S'agit'il d'un site optimisé pour mobile ?</li>
      <li>Y-a t'il les mêmes problèmes de mise en page que ceux constatés sur Firefox pour Android ? Si oui, quels problèmes avez-vous vu sous Firefox pour Android qui ne sont plus là avec le navigateur d'Android ?</li>
    </ol>
  </li>
  <li>Faîtes apparaître Firefox pour Android aux yeux du site, comme s'il s'agissait de Safari sur iPhone, en cliquant sur Menu -&gt; Phony et en choisissant iPhone. Après avoir sélectionné iPhone, cliquez sur Menu -&gt; Recharger. Visitez le même site une nouvelle fois et continuez la même méthode d'exploration que pour le point 2, et posez les questions :
    <ol>
      <li>Est ce que ce site est pour ordinateur de bureau ? Est-ce que le contenu change fortement avec ce que vous avez vu sur Firefox pour Android ? Si oui, s'agit'il d'un site optimisé pour mobile ?</li>
      <li>Y a t'il des problèmes de mise en page ? Si oui, quels sont ces problèmes ?</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