Modification des entêtes dans les requêtes HTTP(s) dans les tests d'automatisation de l'interface utilisateur —

Il existe différentes méthodes pour modifier les en-têtes. Vous pouvez modifier les en-têtes à l'aide d'extensions de navigateur ou d'applications proxy (telles que Charles et Proxyman) qui interceptent la demande et vous permettent de modifier la réponse en incluant les en-têtes.

Mais d'abord, commençons par le début.

HTTP( s) Les en-têtes sont des paires clé-valeur qui peuvent être utilisées par le client ou le serveur pour transmettre des informations supplémentaires avec une demande ou une réponse HTTP(s). Ils contiennent des informations supplémentaires sur les données envoyées. Un en-tête HTTP(s) se compose d'un nom insensible à la casse suivi de deux points (:), puis de sa valeur. Les noms de champs sont insensibles à la casse, mais les valeurs des champs sont sensibles à la casse. Un en-tête peut avoir plusieurs valeurs séparées par des virgules.

Je travaillais sur une application qui ouvrait la page Web fournie, puis donnait à l'utilisateur la possibilité de modifier des éléments, d'ajouter des événements, d'ajouter des analyses, etc. sans avoir besoin de coder. Cela se faisait en chargeant la page dans iframe et en donnant diverses options à l'utilisateur par-dessus. J'ai essayé avec de nombreux sites Web pour voir comment ils se comportent dans iframe. J'ai observé que la plupart des sites Web ne fonctionnent pas dans iframe en raison des en-têtes x-frame-options et content-security-policy.

Presque. tous les sites Web ont un en-tête X-frame-options défini sur deny ou sameorigin en raison duquel le navigateur ne permet pas de charger la page Web dans un iframe ou pas lorsqu'une requête cross-origin essaie de le charger dans un iframe. De plus, l'en-tête content-security-policy a la directive frame-ancestors qui empêche cela.

Il était très important de charger la page en iframeJe me baladais sur Internet pour trouver un moyen de le charger. Il était évident que je devais remplacer l'en-tête X-frame-options par allowall ou le supprimer complètement. C'est à ce moment-là que je suis tombé sur l'extension Requestly qui m'a permis de modifier l'en-tête X-frame-options en faisant correspondre l'URL de la page et me permettant ainsi de remplacer le X -frame-options en-tête lors du débogage.

C'est à ce moment-là que j'ai pu constater pour la première fois la puissance des en-têtes réseau. Ils transportent des données sur les données transférées. La possibilité de modifier les en-têtes de trafic qui passent par votre navigateur est un excellent outil à avoir. En plus de remplacer X-frame-optionsvous pouvez supprimer les en-têtes pour minimiser le suivi en ligne, remplacer l'en-tête content-security-policytester les sites en production, etc.

Alors que tester les applications Web, la modification des en-têtes fournit un excellent hack :

• pour tester le mode invité d'une application ;
• peut définir des cookies à l'aide d'en-têtes ;
• pour tester certaines parties d'une application qui sont désactivées par défaut et peuvent être activé en passant un en-tête de requête personnalisé ;
• pour tester différents cas de test associés aux en-têtes ;
• pour contourner le flux d'authentification dans votre application en passant l'en-tête d'autorisation.

Quand j'ai découvert les tests automatisés du Web apps, il m'est venu à l'esprit que la modification des en-têtes devrait être une fonctionnalité en raison de son immense applicabilité dans les tests d'applications Web. Par conséquent, j'ai décidé d'écrire cet article pour éclairer les moyens de modifier les en-têtes dans les tests automatisés.

Selenium

Le sélénium est largement utilisé comme cadre d'automatisation des tests pour les tests de bout en bout des applications Web. Il a été développé en 2004. Initialement, Selenium IDE était utilisé, mais il ne prenait en charge que Firefox, puis Selenium RC a été développé pour permettre des tests entre navigateurs. Désormais, Selenium WebDriver est utilisé car il prend en charge l'expérience mobile et les sites Web dynamiques. Il imite un véritable utilisateur interagissant avec la page Web.

Avantages de l'utilisation de Selenium WebDriver

• Selenium WebDriver est open source ;
• Il offre des liaisons pour tous les principaux langages de programmation ;
• Fonctionne sur plusieurs systèmes d'exploitation. Le test écrit sous Windows fonctionnerait facilement sur Mac ;
• La simulation du clavier et du curseur est prise en charge ;
• Des modules complémentaires peuvent être installés.

Limitations de Selenium WebDriver

• Pas de prise en charge pour modifier les en-têtes ;
• Non prise en charge de l'ajout de paramètres de demande ;
• Impossible de bloquer une demande.

Comme indiqué, la possibilité de modifier les en-têtes aide énormément à tester les applications, mais Selenium WebDriver ne le prend pas en charge et ils ne prévoient pas de l'inclure récemment.

Cet article se concentre sur diverses approches pour modifier les en-têtes dans une configuration d'automatisation Selenium.

Approche 1 : Selenium Wire (Python)

Selenium Wire étend Selenium Python liaisons pour vous donner accès aux requêtes sous-jacentes faites par le navigateur. Vous créez votre code de la même manière qu'avec Selenium, mais vous obtenez des API supplémentaires pour inspecter les demandes et les réponses et les modifier à la volée.

Cela permet de modifier les demandes et les réponses en déplacement à l'aide d'intercepteurs. Il peut également bloquer les demandes, simuler les réponses, ajouter des paramètres de demande dans l'URL.

Usage

# La fonction intercepteur intercepte la demande réseau
# Si un argument est fourni, les requêtes sont interceptées
# et peut être modifié
def intercepteur (demande):
    request.headers['New-Header'] = 'Une certaine valeur'
# définir le request_interceptor du pilote sur égal
# l'intercepteur personnalisé
driver.request_interceptor = intercepteur
pilote.get()

# Toutes les demandes contiendront désormais New-Header

Les noms d'en-tête en double sont autorisés dans une requête HTTP, donc avant de définir l'en-tête de remplacement, vous devez d'abord supprimer l'en-tête existant en utilisant del sinon deux en-têtes du même nom existera.

# Un intercepteur de réponse prend deux arguments qui
# permet ensuite de bricoler la réponse
def intercepteur (demande, réponse):
    si request.url == 'https://server.com/some/path' :
        response.headers['New-Header'] = 'Une certaine valeur'
driver.response_interceptor = intercepteur
driver.get(<URL_where_to_modify_the_header)

# Les réponses de https://server.com/some/path contiendront désormais
# le New-Header

Un intercepteur de réponse doit accepter deux arguments, un pour la requête d'origine et un pour la réponse.

Limitations

• Ceci n'est disponible qu'en tant que module Python.[19659011]Il ne prend pas en charge les autres langues.

Il existe des outils tels que Requestly qui est un outil unique pour déboguer et modifier les requêtes réseau. Requestly permet aux utilisateurs de modifier les en-têtes, de rediriger les URL, de changer d'hôte, de simuler la réponse de l'API, de retarder les requêtes réseau, d'insérer des scripts personnalisés, etc. Il fournit un package npm prêt à l'emploi qui est un wrapper autour de l'extension permettant l'utilisation de l'extension dans Selenium. Il prend en charge Chrome, Firefox et Edge.

L'utilisation de Requestly dans Selenium

Requestly vous permet de faire beaucoup plus de choses que de simplement modifier les en-têtes. Toutes ces choses peuvent être configurées dans une interface Web et la liste partagée peut être chargée dans l'application, ce qui permet à l'utilisateur de modifier facilement les règles dans une application Web.

Pour installer : npm i @requestly/selenium

Usage

Une règle de modification des en-têtes peut être créée sur app.requestly.io/rules après l'installation de l'extension.

Après avoir créé l'URL, cliquez sur le bouton Partager pour générer un lien pour l'URL.

L'URL de la sharedList créée ci-dessus est ici.

Cette URL est une règle Requestly qui ajoute l'en-tête Access-Control-Allow-Origin à toutes les requêtes.

Cette règle peut être utilisée dans Selenium WebDriver à l'aide de sharedList URL qui est décrite ci-dessous :

require("chromedriver");
const { Builder } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { getRequestlyExtension, importRequestlySharedList } = require("@requestly/selenium");

const options = new chrome.Options().addExtensions(getRequestlyExtension("chrome"));
pilote const = nouveau Builder()
    .forBrowser("chrome")
    .setChromeOptions(options)
    .construire();

// Importe des règles dans Selenium à l'aide de la fonction Requestly sharedList
// importRequestlySharedList(driver, );

importRequestlySharedList(driver, 'https://app.requestly.io/rules/#sharedList/1626984924247-Adding-Headers-Example');

Plus d'informations peuvent être trouvées ici.

Limitations

• Il propose un package npm limitant le module à JavaScript uniquement.
• Les listes partagées doivent être créées manuellement pour utiliser les règles dans Selenium. Par conséquent, les règles ne peuvent pas être contrôlées via le code écrit pour le test d'automatisation de Selenium. [19659063]Approche 3 : Utilisation de Puppeteer

  Puppeteer est une bibliothèque de nœuds développée par Google qui fournit une API de haut niveau pour contrôler Chrome ou Chromium sans tête via le protocole DevTools. Il peut également être configuré pour utiliser Chrome ou Chromium complet (sans tête).

  Lorsqu'on parle de la configuration de l'automatisation du navigateur, Selenium vient automatiquement à l'esprit, mais depuis l'avènement de Puppeteer, il est largement utilisé pour le scraping Web. Il offre plus de contrôle sur Chrome que Selenium, probablement en raison de la prise en charge de Google. Également pour la même raison, cela exclut le besoin d'un pilote externe pour exécuter le navigateur.

  Usage

  const puppeteer = require('puppeteer');
  
  (async () => {
      navigateur const = wait puppeteer.launch();
      const page = wait browser.newPage();
      attendre page.goto('');
      wait page.screenshot({ chemin : 'example.png' });
      wait browser.close();
  })();

  La méthode page.setExtraHTTPHeaders(headers) peut être utilisée pour définir les en-têtes.

  Elle peut également modifier et supprimer les en-têtes existants. Une fois les demandes interceptées à l'aide d'une combinaison de page.setRequestInterception(true) et page.on().

  wait page.setRequestInterception(true);
  page.on('demande', demande => {
  // Remplacer les en-têtes
      en-têtes const = Object.assign({}, request.headers(), {
      foo: 'bar', // définit l'en-tête "foo"
      origin : non défini, // supprime l'en-tête "origin"
  });
  
  request.continue({headers});
  
  });

  Source du code

  Limitations

  • Puppeteer est limité à Chrome pour le moment. Il ne peut pas être utilisé pour des tests inter-navigateurs.
  • Il a une communauté plus petite que Selenium. Il semble y avoir plus de support pour Selenium dans la communauté.
  • Il ne prend en charge que JavaScript.

  Conclusion

  La modification des en-têtes de réseau s'avère être un outil très puissant dans un environnement de test. Il y a beaucoup plus que ce qui peut être couvert dans cet article. J'ai essayé de couvrir certaines des méthodes les plus simples pour modifier les en-têtes dans les tests d'automatisation de l'interface utilisateur.

  Chaque méthode présente des avantages en fonction du cas d'utilisation et de la langue que vous utilisez. Voici quelques-unes des préférences :

  • Si vous souhaitez utiliser Selenium en Python, préférez Selenium-Wire car il fournit de nombreuses fonctionnalités en plus de Selenium-Webdriver.
  • Si vous souhaitez tester uniquement sur Chrome, préférez marionnettiste en raison de sa prise en charge de Google et de sa prise en charge prête à l'emploi pour toutes les fonctionnalités, y compris la modification des en-têtes. . Si votre cas d'utilisation vous oblige à injecter des scripts ou à rediriger des ressources réseau au moment de l'exécution (en plus de la modification des en-têtes), Requestly est un choix idéal.

  J'espère que cet article vous donnera un aperçu de la modification des en-têtes dans une configuration de test d'application Web automatisée. .

  Autres ressources

  (vf, yk, il)