[JAVA] Examiner les éléments HTML et créer une classe Page (à l'aide de Selenide)

introduction

Création d'un environnement de test E2E avec Selenium (Java)

Bien que je l'ai construit, je vais probablement avoir un gros coup de pouce lorsqu'on me demande "Voulez-vous créer une classe de page?". Je vais donc enregistrer comment créer une classe de page aussi facilement que possible. D'après mon expérience, je dis probablement beaucoup: innocent:

Identifiez l'élément sur lequel vous souhaitez opérer (comme un sélecteur CSS)

Expliqué dans la version Windows. Utilisez les outils de développement de Chrome.

  1. Affichez l'écran que vous souhaitez vérifier aWS050241.JPG

  2. Appuyez sur F12 pour afficher les outils de développement aWS050242.JPG

  3. Cliquez sur le bouton de sélection et sélectionnez l'élément que vous souhaitez utiliser aWS050243.JPG

  4. Cliquez avec le bouton droit sur la source HTML inversée et sélectionnez Copier - Copier le sélecteur pour copier des informations telles que "#q". aWS050244.JPG

Essayez de créer une classe de page

La classe Page suivante sera créée en reflétant les éléments examinés précédemment.

Google.java


package page;

import static com.codeborne.selenide.Selenide.*;

import org.openqa.selenium.WebDriver;

public class Google extends PageBase {

    public static final String _url = "https://www.google.co.jp/webhp";

    public Google(WebDriver webDriver) {
        super(webDriver);
    }

    private String _id_search = "#lst-ib";

    // ****************************************
    //Recherche page
    // ****************************************

    public Google __Rechercher une entrée de mot(String s) {
        $(_id_search).setValue(s);
        return this;
    }

    public Google __Faites une recherche() {
        $(_id_search).submit();
        return this;
    }
}

Le test est le code suivant.

GoogleTest.java


package test;

import org.junit.Test;

import com.htmlhifive.pitalium.core.model.ScreenshotArgument;

import page.Google;

public class GoogleTest extends TestBase {

    @Test
    public void OK() throws Exception {

        driver.get(Google._url);
        Google page = new Google(driver);

        page.__Rechercher une entrée de mot("test")
            .__Faites une recherche();

        ScreenshotArgument arg = ScreenshotArgument.builder("result").addNewTarget().build();
        assertionView.verifyView(arg);
    }
}

Créer une classe Page qui peut gérer les menus contextuels

Essayez d'ajouter une méthode qui peut être utilisée en cliquant sur l'outil après avoir affiché les résultats de la recherche. Comment vérifier les éléments est le même qu'avant.

Le sélénium semble fonctionner trop rapidement et peut provoquer des erreurs telles que des éléments manquants. Il sera stable si vous attendez l'élément affiché après avoir cliqué.

Google.java


package page;

import static com.codeborne.selenide.Condition.*;
import static com.codeborne.selenide.Selenide.*;

import java.util.Iterator;

import org.openqa.selenium.NoSuchElementException;
import org.openqa.selenium.WebDriver;

import com.codeborne.selenide.SelenideElement;

public class Google extends PageBase {

    public static final String _url = "https://www.google.co.jp/webhp";

    public Google(WebDriver webDriver) {
        super(webDriver);
    }

    private String _id_search = "#lst-ib";

    // ****************************************
    //Recherche page
    // ****************************************

    public Google __Rechercher une entrée de mot(String s) {
        $(_id_search).setValue(s);
        return this;
    }

    public Google __Faites une recherche() {
        $(_id_search).submit();
        return this;
    }

    // ****************************************
    //Page de résultats de recherche (ce qui suit est une classe différente)
    //À l'origine "__Faites une recherche()Renvoie la classe de page de résultats de recherche avec la méthode
    // ****************************************

    public Google __Cliquez sur l'outil() {
        $("#hdtb-tls").click();
        return this;
    }

    public Google __outil$Cliquez sur la période() {
        //Vérifiez si le menu après avoir sélectionné l'outil est affiché
        if (!$("#hdtbMenus").isDisplayed()) {
            __Cliquez sur l'outil();
        }
        //Attendez 60 secondes pour l'élément affiché après la sélection
        $("#hdtbMenus").waitUntil(appear, 60000);

        $("#hdtbMenus > div > div:nth-child(5) > div").click();

        return this;
    }

    public Google __outil$période$Cliquez dans l'heure() {
        return __outil$période$Cliquez sur le caractère spécifié("En une heure");
    }

    public Google __outil$période$Cliquez d'ici 1 an() {
        return __outil$période$Cliquez sur le caractère spécifié("Dans un délai d'un an");
    }

    private Google __outil$période$Cliquez sur le caractère spécifié(String text) {
        //Vérifiez si le menu période est affiché
        if (!$("#hdtbMenus > div > ul.hdtbU.hdtb-mn-o").isDisplayed()) {
            __outil$Cliquez sur la période();
        }
        //Attendez 60 secondes pour l'élément affiché après la sélection
        $("#hdtbMenus > div > ul.hdtbU.hdtb-mn-o").waitUntil(appear, 60000);

        return matchTextClick(text, $$("#hdtbMenus > div > ul.hdtbU.hdtb-mn-o > li").iterator());
    }

    private Google matchTextClick(String text, Iterator<SelenideElement> seItr) {

        boolean ckickFlg = false;

        while (seItr.hasNext()) {
            SelenideElement se = seItr.next();
            if (text.equals(se.getText())) {
                se.click();
                ckickFlg = true;
                break;
            }
        }

        if (!ckickFlg) {
            throw new NoSuchElementException("Click error:" + text);
        }

        return this;
    }
}

Le test est le code suivant.

GoogleTest.java


package test;

import org.junit.Test;

import com.htmlhifive.pitalium.core.model.ScreenshotArgument;

import page.Google;

public class GoogleTest extends TestBase {

    @Test
    public void OK() throws Exception {

        driver.get(Google._url);
        Google page = new Google(driver);

        page.__Rechercher une entrée de mot("test")
            .__Faites une recherche();

        ScreenshotArgument arg = ScreenshotArgument.builder("result1").addNewTarget().build();
        assertionView.verifyView(arg);

        page.__outil$période$Cliquez dans l'heure();
//Si vous pouvez parfaitement comprendre l'état de l'écran, la description suivante est plus rapide
//        page.__Cliquez sur l'outil()
//            .__outil$Cliquez sur la période()
//            .__outil$période$Cliquez dans l'heure();


        arg = ScreenshotArgument.builder("result2").addNewTarget().build();
        assertionView.verifyView(arg);

        page.__outil$période$Cliquez d'ici 1 an();


        arg = ScreenshotArgument.builder("result3").addNewTarget().build();
        assertionView.verifyView(arg);
    }
}

Créons une classe de page qui traite les écrans avec des cadres séparés

Il semble que vous deviez changer de page avec des cadres séparés. Je pense qu'il est préférable de couvrir également ce contrôle avec la classe Page. (Veuillez enseigner s'il y a un moyen d'aller sans changer)

18/04/23 modifié Je comprends ce que vous avez commenté, mais je n'ai pas pu le refléter dans le code en raison d'un manque de capacité: scream: J'aimerais pouvoir écrire une description similaire dans la méthode «__Enter in item 1», mais je ne peux pas y penser.

FrameSample.java


package page;

import static com.codeborne.selenide.Selenide.*;

import org.openqa.selenium.WebDriver;

import com.codeborne.selenide.SelenideElement;
import com.codeborne.selenide.WebDriverRunner;

public class FrameSample extends PageBase {

    public static final String _url = "https://";

    public FrameSample(WebDriver webDriver) {
        super(webDriver);
    }

    /**Entrez dans l'élément qui existe dans le cadre par défaut*/
    public FrameSample __Entrez dans l'élément 1(String s) throws InterruptedException {
        $("#in1").setValue(s);
        return this;
    }

    /**Entrée dans un élément qui existe dans un autre cadre*/
    public FrameSample __Entrez dans l'élément 2(String s) throws InterruptedException {
        switcFrame($(".iframe"));
        $("#in2").setValue(s);
        switchDefaultFrame();
        return this;
    }

    /***
     *Passer au cadre par défaut
     * @throws InterruptedException
     */
    private void switchDefaultFrame() throws InterruptedException{
        //Comme le traitement n'est pas stable, je mets Wait dans le changement de trame pour le moment
        WebDriverRunner.getWebDriver().switchTo().defaultContent();
        Thread.sleep(2000);
    }

    /***
     *Passer à un autre cadre
     * @Élément du cadre param se
     * @throws InterruptedException
     */
    private void switcFrame(SelenideElement se) throws InterruptedException{
        //Comme le traitement n'est pas stable, je mets Wait dans le changement de trame pour le moment
        WebDriverRunner.getWebDriver().switchTo().frame(se);
        Thread.sleep(2000);
    }
}

Recommended Posts

Examiner les éléments HTML et créer une classe Page (à l'aide de Selenide)
Un mémo pour créer un formulaire simple en utilisant uniquement HTML et CSS dans Rails 6
Créer une API à l'aide de Retrofit2, Okhttp3 et Gson (Java)
[ruby] Créer une classe DHT11 / 22 à partir de zéro en utilisant la fiche technique