Comment gérer le pop-up de validation de contrainte HTML5 à l'aide de Selenium?

Sans voir le html, je ne peux pas vous le dire en toute confiance.

Cependant, cela devrait être extrêmement facile (modifier: fameux derniers mots). C'est l'une des deux choses suivantes:

1) L'attribut title du champ de saisie. Le survol de quelque chose, ou (s'il est conçu pour) mettre le focus sur un élément avec un attribut title montre ce texte de titre dans une boîte comme celle-ci. Bien que la boîte ait certainement été stylisée.

2) Il s'agit d'un div / autre html personnalisé qui est lié à un événement qui implique l'événement "focus" de ce champ d'entrée.

Les deux nécessitent des méthodes différentes pour obtenir le texte. Parce qu'ils sont différents, j'ai besoin de connaître le code HTML impliqué. Veuillez ouvrir les outils de développement de votre navigateur et inspecter le champ de messagerie. Ensuite, copiez le code HTML autour de cet élément, y compris ce qui contient le texte de l'info-bulle ci-dessus.

Une fois que vous collez ce code HTML, la réponse sera simple.

Edit: je suis absolument perplexe. J'ai examiné le html, parcouru la liste des événements et les fichiers javascript. Il n'y a AUCUNE référence au texte affiché dans cette info-bulle.

De plus, il s'affiche comme une info-bulle basée sur l'attribut "titre". Ce n'est pas un div. Pourtant, le titre n'existe pas simplement dans le DOM pour l'élément. Je ne sais pas quelle magie les développeurs ont fait pour cette page pour que tout cela se produise. Je suis développeur web et ingénieur en automatisation, et cela me dépasse. Ce n'est peut-être pas quelque chose que j'ai déjà rencontré auparavant, ou il me manque peut-être quelque chose qui me ferait me sentir stupide une fois que je l'ai vu.

Pour cette raison, je vous recommande fortement de demander aux développeurs de cette page directement ce qu'ils ont fait pour que ce titre apparaisse tel quel (sans exister dans le html, et aucune référence dans le javascript nulle part).

Modifier # 2: Ici est la reconnaissance d'image de dernier recours que j'ai mentionnée. Il utilise AForge, qui est facile à extraire en tant que dll. Si vous utilisez Visual Studio, vous pouvez le récupérer sous forme de package nuget.

using AForge.Imaging;
using System.Drawing;
using System.IO;
using OpenQA.Selenium;

public static class AssertImages
{

    //97.5% match expected. 100% is too strict, and practicly impossible. The lower the value you provide, the more possibly it is for a false match.
    //Never go below 75%. False matches above 75% are generally only possible if the baseline image is very generic, such as a basic shape or colored item.
    public const float BASE_EXPECTED_MATCH_PERCENT = 0.975f; 

    /// <summary>
    /// Determines if a provided baseline image exists within a screenshot of the current browser window .
    /// </summary>
    /// <param name="relativePathToBaseline"> Pass the relative url to the baseline image we are searching for.</param>
    /// <param name="matchExpected">Optional parameter that modifies the expected percent match. Use this when a baseline image may be stretched, different colored, or otherwise slightly modified from provided baseline.</param>
    /// <returns></returns>
    public static bool DoesScreenshotContain(string relativePathToBaseline, float matchExpected = BASE_EXPECTED_MATCH_PERCENT)
    {

        //Save screenhot as source image in jpeg format. Then, read jpeg as bitmap.
        Screenshot ss = ((ITakesScreenshot)BaseTest.Driver).GetScreenshot();
        string tempFile = Path.Combine(Path.GetTempPath(), "temp_screenshot.jpg");
        ss.SaveAsFile(tempFile, ScreenshotImageFormat.Jpeg);
        Bitmap sourceImage = new Bitmap(new MemoryStream(File.ReadAllBytes(tempFile)));
        Bitmap template = new Bitmap(Path.Combine(Reporting.BaseDirectory, "Suite", "ImageRecognition", "Baselines", relativePathToBaseline));
        //Find baseline in template image.
        ExhaustiveTemplateMatching tm = new ExhaustiveTemplateMatching(BASE_EXPECTED_MATCH_PERCENT);
        return tm.ProcessImage(sourceImage, template).Length > 0;

    }

}

Ensuite, prenez une photo du texte à l'intérieur de l'info-bulle à utiliser comme base de référence. Comme mentionné ci-dessous, j'hésite énormément à utiliser cela comme solution finale. L'option bien supérieure est de trouver un moyen de le faire avec Selenium ou javascript direct, soit via quelqu'un avec une meilleure réponse que moi, soit avec l'aide des développeurs qui ont créé ce code. Cela étant dit, si vous avez besoin de quelque chose qui fonctionne en ce moment, cela devrait vous donner une satisfaction immédiate jusqu'à ce qu'une meilleure solution soit identifiée.

J'ai également rencontré ce type de page auparavant et j'ai eu une discussion avec les développeurs de l'interface utilisateur à ce moment-là. Les erreurs qui sont affichées sur l'interface utilisateur sont la prise en charge native du navigateur et chaque navigateur afficherait par défaut ce message d'erreur si le champ est laissé vide.

Cela a été introduit dans HTML5 et s'il y a un attribut required = "required" dans la structure html de l'élément, le navigateur affichera par défaut le message d'erreur que vous obtenez. Donc, si vous vérifiez également votre élément, required = "required" est également présent dans le html de votre élément.

En règle générale, les sites Web n'utilisent pas cette fonctionnalité car ils utilisent leurs messages d'erreur personnalisés sur la page, mais dans votre cas, elle est utilisée. Par conséquent, il n'est pas possible de détecter ce message d'erreur à l'aide du sélénium car le message d'erreur n'est pas présent sur l'interface utilisateur ou n'importe où dans le code. Donc, soit vous demandez à vos développeurs de modifier l'implémentation, soit vous devez ignorer ces validations de votre suite de tests.

La popup dont vous parlez est le résultat de Méthode element.setCustomValidity () de l'API de contrainte.

Remarque : la validation des contraintes HTML5 ne supprime pas le besoin de validation côté serveur. Même s'il faut s'attendre à beaucoup moins de demandes de formulaire invalides, des demandes non valides peuvent toujours être envoyées par des navigateurs non conformes (par exemple, des navigateurs sans HTML5 et sans JavaScript) ou par des méchants qui tentent de tromper votre application Web. Par conséquent, comme avec HTML4, vous devez également valider les contraintes d'entrée côté serveur, d'une manière cohérente avec ce qui est fait côté client.

Solution

Pour récupérer le texte qui résulte de la méthode element.setCustomValidity () , vous pouvez utiliser l'une des Stratégies de localisation :

• Utilisation de Python , Mozilla et CssSelector :

  • Bloc de code:

    Please fill out this field.
    

  • Sortie de la console:

    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    import org.openqa.selenium.support.ui.ExpectedConditions;
    import org.openqa.selenium.support.ui.WebDriverWait;
    
    public class validationmessage {
    
        public static void main(String[] args) {
    
            System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
            ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions"); 
            WebDriver driver =  new ChromeDriver(options);
            driver.get("https://accounts.us1.advisor.ws/user/login");
            WebElement email_username = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='cell small-21 form-text required' and @id='edit-name'][@name='name']")));
            System.out.println(email_username.getAttribute("validationMessage"));
        }
    }
    

• Utilisation de Java , Chrome et Xpath :

  • Bloc de code:

    Please fill out this field.
    

  • Sortie de la console:

    from selenium import webdriver
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    from selenium.webdriver.common.by import By
    
    driver = webdriver.Firefox(executable_path=r'C:\Utility\BrowserDrivers\geckodriver.exe')
    driver.get("https://accounts.us1.advisor.ws/user/login")
    email_username = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.cell.small-21.form-text.required#edit-name[name='name']")))
    print(email_username.get_attribute("validationMessage"))