Как выбрать несколько флажков в Selenium WebDriver с помощью Java?

Вы когда-нибудь задумывались о том, как было бы неприятно, если бы вам приходилось входить в систему каждый раз, когда вы хотите просмотреть свой профиль в Facebook? Или в вопросе с несколькими вариантами ответов, где вы хотели бы отметить много вариантов, но не можете? Или вам приходится вводить информацию о своей карте каждый раз, когда вы совершаете платеж, поскольку вы не можете ее сохранить?

Это лишь некоторые из многочисленных случаев на веб-страницах, когда может пригодиться быстрая функциональность. Оставайтесь на сайте в течение некоторого времени, сохраняйте данные карты и многое другое простым щелчком мыши. По сути, это техника включения и выключения, позволяющая осуществлять многократный выбор.

Ответом на этот вопрос в мире веб-разработки являются флажки. Флажки широко применяются на веб-страницах и помогают пользователям давать согласие/переключать или выбирать несколько вариантов, как это требуется в различных приложениях.

С ростом их использования, как инженер по автоматизации, вы должны знать, как работать с флажками, используя фреймворки автоматизации тестирования, такие как Selenium.

В этом учебнике по Selenium Java мы обсудим различные методы автоматизации и выбора нескольких флажков в Selenium WebDriver с помощью Java.

Что такое флажок?

Флажок — это элемент графического интерфейса пользователя на любой веб-странице, который помогает пользователям сделать выбор из заданного набора опций. Как только выбор сделан, он помогает записать его для дальнейшей обработки.

Флажок может позволить пользователю сделать:

• один выбор из списка опций

• Несколько вариантов из списка вариантов

• Дать согласие (или включить/выключить) на выполнение определенных требований на веб-странице.

В реализации Checkbox, как говорят, имеет два состояния:

• Когда он выбран, он называется отмеченным.

• Когда флажок не выбран, он называется снятым.

Интересно отметить, что некоторые приложения также предоставляют промежуточное состояние, называемое трехсостоянием, где вместо галочки, которая является обычным представлением отмеченного флажка, используется заполненное поле или тире для обозначения выбора. Это происходит в тех случаях, когда у нас есть родительские и дочерние флажки, и при выборе дочернего флажка происходит автоматический выбор всех родительских флажков в иерархии.

Флажки на веб-страницах

Флажки в основном используются на веб-страницах, чтобы предложить пользователю несколько вариантов выбора. На HTML-странице они могут быть идентифицированы с помощью нескольких уникальных свойств, которые можно использовать для автоматизации флажков с помощью Selenium WebDriver.

Флажок в DOM определяется с помощью тега input с типом Checkbox, как показано ниже:

<input type="checkbox">

Благодаря такой реализации все стратегии локатора веб-элементов могут быть использованы для нахождения и автоматизации флажка в Selenium WebDriver.

Хотите выполнять облачную автоматизацию тестирования на самой мощной облачной инфраструктуре? Используйте возможности автоматизации тестирования LambdaTest для более быстрой, надежной и масштабируемой работы в облаке прямо сейчас.

Как определить местоположение нескольких флажков в Selenium WebDriver?

Прежде чем перейти к тому, как выбрать несколько флажков в Selenium WebDriver с помощью Java и к реализации флажков в автоматизации, было бы неплохо понять различные способы их размещения на веб-странице и то, как мы можем выбрать флажок после его размещения.

Нахождение флажков с помощью атрибута ID

При использовании ID-локатора в Selenium, в большинстве хорошо спроектированных веб-страниц всем HTML-тегам присваивается значение id **. Таким образом, если взаимодействующий флажок имеет **id, связанный с ним, то мы можем использовать это уникальное значение для взаимодействия с флажком.

Что касается флажка здесь, то значение id присвоено. Поэтому он может быть расположен следующим образом:

WebElement checkbox = driver.findElement(By.id("isAgeSelected"));

Нахождение флажков с помощью имени класса

Локатор className в Selenium может быть использован, когда есть группа флажков, и с каждым из них нужно взаимодействовать, поскольку элементы одной группы относятся к одному и тому же имени класса.

Таким образом, расположенные таким образом флажки хранятся в списке WebElements и с ними можно взаимодействовать, используя индекс из списка.

Как видно из приведенного выше примера, все флажки находятся в одной группе. Следовательно, они имеют одинаковое имя класса.

Они могут быть расположены, как показано ниже:

List<WebElement> checkboxes = driver.findElements(By.className("cb-element mr-10"));

Нахождение флажков с помощью значения элемента

Флажки можно найти с помощью их атрибута Value, поскольку флажок имеет уникальное значение, присвоенное ему. Эта стратегия в основном используется в случаях, когда флажки находятся в группе. Благодаря этому все они будут иметь один и тот же атрибут Class или Name, связанный с ними, а также уникальное значение Value, которое помогает взаимодействовать с конкретным флажком.

Это один из примеров, когда Класс одинаков для всех различных Значений. Мы можем использовать атрибуты Value для всех флажков для их уникальной идентификации.

List<WebElement> checkboxes = driver.findElements(By.xPath("//input[[@name](http://twitter.com/name)='color']"));

for(int i=0; i<checkboxes.size(); i++)        
    {   
String value = checkboxes.get(i).getAttribute("value");

if (value.equalsIgnoreCase("orange"))

{       
 //perform action on checkbox which have value as orange
 break;
 }
}

Нахождение флажков с помощью CSS Selector или XPath

Иногда бывает нелегко найти элемент на веб-странице непосредственно по его атрибутам. То же самое происходит и с флажками. Иногда реализация в DOM не позволяет выбрать их с помощью уникальных идентификаторов или даже атрибутов значения, как мы обсуждали ранее.

В таких случаях использование CSS-селектора или XPath-селектора для определения местоположения флажков становится наиболее идеальным способом:

//locating a checkbox using XPath
WebElement checkbox = driver.findElement(By.xpath("//input[[@id](http://twitter.com/id)='isAgeSelected']"));

//locating a checkbox using CSS Selector
WebElement checkbox = driver.findElement(By.cssSelector("input[id='isAgeSelected']"));

Мы подробно рассмотрели различные способы размещения флажка. В следующем разделе мы узнаем, как выбрать несколько флажков в Selenium WebDriver с помощью Java.

Приступайте к сквозному автоматизированному тестированию с помощью фреймворка тестирования Cypress и облака автоматизации тестирования LambdaTest.

Как выбрать несколько флажков в Selenium WebDriver с помощью Java?

Давайте рассмотрим механизмы, с помощью которых вы можете взаимодействовать с флажком.

Флажок в Selenium WebDriver можно выбрать/поставить галочку или снять/поставить галочку, просто щелкнув по нему с помощью метода click() Selenium WebDriver.

Когда флажок расположен, мы просто щелкаем по нему, чтобы изменить его состояние.

WebElement checkbox = driver.findElement(By.id("isAgeSelected"));
checkbox.click();

Если флажок находится в состоянии без флажка, то щелчок переводит его в состояние с флажком и наоборот.

Выполнение проверки флажков с помощью Selenium WebDriver

Под проверкой флажков мы подразумеваем проверку состояния флажка до и после выполнения операции Click() на флажке. Для этого Selenium WebDriver предоставляет несколько функций, которые можно использовать при работе с несколькими флажками.

Метод isSelected() используется для проверки текущего состояния флажка, независимо от того, выбран он или нет. Аналогично, перед нажатием нам может понадобиться проверить, что флажок не только отображается, но и включен для взаимодействия. Методы isEnabled() и isDisplayed() в Selenium используются соответственно для проверки отображения и включения флажков на веб-странице.

Важно отметить, что методы isDisplayed() и isEnabled() относятся к предварительной проверке, поскольку они используются до нажатия на флажок. Метод isSelected() относится как к предварительной, так и к последующей валидации, поскольку он помогает проверить состояние флажка до и после выполнения операции щелчка.

Демонстрация: Автоматизация нескольких флажков в Selenium WebDriver с помощью Java

До сих пор мы рассмотрели различные способы нахождения, выбора и проверки флажков. В этом разделе статьи о том, как выбрать несколько флажков в Selenium WebDriver с помощью Java, давайте рассмотрим, как методы Selenium WebDriver можно использовать для автоматизации взаимодействия с флажками на странице. Для демонстрации я буду использовать привязку Selenium Java. Прежде чем мы начнем, следует отметить несколько моментов, касающихся примера автоматизации тестирования:

• Мы создадим Maven-проект с использованием Java в Eclipse IDE.

• Он будет использовать Selenium WebDriver для автоматизации веб-тестирования и TestNG для выполнения тестовых примеров.

• Проект будет состоять из 2 файлов: BaseClass и TestCheckboxes.

• BaseClass.java будет содержать код для инициализации браузера и подключения к удаленной Selenium Grid.

• TestCheckboxes.java будет содержать 2 тестовых случая, объясняющих все способы нахождения, выбора и проверки нескольких флажков в Selenium WebDriver.

Давайте приступим к работе…

1- Создайте Maven-проект в Eclipse и назовите его MultipleCheckboxes. Те, кто не является поклонником Eclipse, могут выполнить те же шаги в выбранной ими IDE. Настройка и результаты будут такими же.

2- Обновите файл pom.xml вашего проекта, чтобы в нем появились зависимости Selenium и TestNG. Мы будем использовать последнюю версию для обоих.

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>MultipleCheckboxes</groupId>
      <artifactId>MultipleCheckboxes</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <build>
        <sourceDirectory>src</sourceDirectory>
        <plugins>
          <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.8.1</version>
            <configuration>
              <release>16</release>
            </configuration>
          </plugin>
        </plugins>
      </build>
      <dependencies>
        <dependency>
            <groupId>org.Seleniumhq.Selenium</groupId>
            <artifactId>Selenium-java</artifactId>
            <version>4.1.4</version>
        </dependency>
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>7.5</version>
            <scope>test</scope>
        </dependency>
      </dependencies>
    </project>

3- Добавьте 2 файла классов Java в пакет src/test и назовите их BaseClass.java и TestCheckboxes.java.

Описание кода: BaseClass

Внутри файла BaseClass добавьте следующий код для инициализации сеанса браузера для запуска тестовых примеров и для его закрытия после завершения.

package test;

import java.net.MalformedURLException;
import java.net.URL;

import org.openqa.Selenium.remote.DesiredCapabilities;
import org.openqa.Selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;


public class BaseClass {
    public RemoteWebDriver driver = null;
    String username = "<lambdaTest_username>";
    String accessKey = "<lambdaTest_accesskey>";

    @BeforeMethod
    public void setUp() {
      DesiredCapabilities capabilities = new DesiredCapabilities();
      capabilities.setCapability("browserName", "Chrome");
      capabilities.setCapability("version", "92.0");
      capabilities.setCapability("platform", "Windows 10");
      capabilities.setCapability("resolution", "1024x768");
      capabilities.setCapability("build", "Multiple Checkboxes using Selenium JAVA");
      capabilities.setCapability("name", "Multiple Checkboxes using Selenium JAVA");

        try {
            driver = new RemoteWebDriver(
                    new URL("https://" + username + ":" + accessKey
                        + "@hub.lambdatest.com/wd/hub"), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        }
    }

    @AfterMethod
    public void closeDriver() {
        driver.quit();
    }
}

Этот код будет унаследован нашим тестовым классом, что позволит избежать избыточности такого кода для создания сессий WebDriver и запуска браузера на гриде. Это также обеспечивает абстракцию кода драйвера от любого другого пользователя класса.

Шаг 1. В этом файле мы начинаем с создания экземпляра Selenium Remote WebDriver, поскольку он будет использоваться для выполнения кода на Selenium Cloud Grid.

public RemoteWebDriver driver = null;

Выполнение в облаке Selenium Grid помогает параллельно выполнять несколько примеров в различных браузерах и ОС. Это также обеспечивает скорость и масштабируемость, делая выполнение более быстрым и надежным.

Если вы новичок в Selenium и задаетесь вопросом, что такое облачное тестирование с помощью Selenium, рекомендуем ознакомиться с нашим руководством «Что такое Selenium?

Подпишитесь на YouTube-канал LambdaTest и будьте в курсе последних уроков по автоматизированному тестированию браузеров, тестированию Cypress E2E, тестированию мобильных приложений и многому другому.

Шаг 2. Как упоминалось в предыдущем шаге, поскольку мы используем облачную сетку, нам необходимо добавить учетные данные облачной платформы, используемой для выполнения нашего кода. В этом блоге о том, как выбрать несколько флажков в Selenium WebDriver с помощью Java, использовалась платформа LambdaTest.

String username = "<lambdatest_username>";
String accessKey = "<lambdatest_accesskey>";

LambdaTest облегчает кросс-браузерное тестирование на онлайн ферме браузеров из 3000+ реальных браузеров и операционных систем в облаке, а также предоставляет интерактивные панели для анализа отчетов о выполнении и журналов по мере необходимости.

Чтобы получить свое имя пользователя и ключ доступа, посетите раздел профиля LambdaTest на панели управления LambdaTest после создания своего профиля на LambdaTest.

Шаг 3. Добавьте первую функцию в этом файле setUp() для установки начальных возможностей браузера и установления соединения с удаленной сеткой LambdaTest.

Эта функция аннотирована аннотацией @BeforeMethod в TestNG, так как мы хотим выполнять эту функцию перед каждым запуском теста.

[@BeforeMethod](http://twitter.com/BeforeMethod)
 public void setUp() {
   //code to set the DesiredCapabilites as needed for the browser
        //Selenium Capabillities Generator of LambdaTest can be used for this

try {
   driver = new RemoteWebDriver(
     new URL("https://" + username + ":" + accessKey
       + "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub"), capabilities);
  } catch (MalformedURLException e) {
   System.out.println("Invalid grid URL");
  }
 }

Еще одно преимущество использования платформы LambdaTest можно увидеть здесь с помощью Selenium Desired Capabilities Generator для выполнения Selenium TestNG тестирования на платформе LambdaTest с желаемыми комбинациями браузеров и операционных систем, выбирая их по мере необходимости.

Шаг 4. После завершения тестирования нам также необходимо закрывать браузер после каждого запуска, поэтому мы добавляем еще одну функцию closeDriver() для закрытия браузера и аннотируем ее аннотацией @AfterMethod для обеспечения выполнения после каждого тестового случая.

[@AfterMethod](http://twitter.com/AfterMethod)
public void closeDriver() {
 driver.quit();
}

Краткое описание кода: TestCheckboxes

Внутри этого файла TestCheckboxes.java мы добавим 2 тестовых случая:

• TestCase 1: Демонстрация взаимодействия с одним флажком.

• TestCase 2: Демонстрация взаимодействия с несколькими флажками путем их обхода.

Оба эти случая также будут содержать методы проверки флажков.

package test;

import java.util.List;

import org.openqa.Selenium.By;
import org.openqa.Selenium.WebElement;
import org.testng.annotations.Test;

public class TestCheckboxes extends BaseClass{

    @Test
    public void testSingleCheckbox()
    {
        System.out.println("Navigating to the URL");
        driver.get("https://www.lambdatest.com/Selenium-playground/checkbox-demo");

        //using ID attribute to locate checkbox
        WebElement checkbox = driver.findElement(By.id("isAgeSelected"));

        //pre-validation to confirm that checkbox is displayed.
        if(checkbox.isDisplayed())
        {
            System.out.println("Checkbox is displayed. Clicking on it now");
            checkbox.click();
        }

        //post-validation to confirm that checkbox is selected.
        if(checkbox.isSelected())
        {
            System.out.println("Checkbox is checked");
        }
    }


    @Test
    public void testMultipleCheckbox()
    {
        System.out.println("Navigating to the URL");
        driver.get("https://www.lambdatest.com/Selenium-playground/checkbox-demo");

        //using class name to fetch the group of multiple checkboxes
        List<WebElement> checkboxes = driver.findElements(By.className("cb-element mr-10"));

        //traverse through the list and select all checkboxes if they are enabled and displayed.
        for(int i=0; i<checkboxes.size(); i++)
        {
            if(checkboxes.get(i).isDisplayed() && checkboxes.get(i).isEnabled())
            {
                   System.out.println("Checkbox is displayed at index : " + i + " Clicking on it now");
                        checkboxes.get(i).click();
            }
        }

        //deselect the checkbox on index 1 from the list of checkboxes selected above
        System.out.println("de-selecting checkbox with index 1");
        checkboxes.get(1).click();
        if(checkboxes.get(1).isSelected())
        {
            System.out.println("Checkbox is still selected");
        }
        else
        {
            System.out.println("Checkbox is deselected successfully");
        }
    }
}

Шаг 1. Как вы можете видеть, оба тестовых случая в этом файле имеют общий код для запуска браузера и перехода на тестируемую веб-страницу, для чего используется приведенный ниже код.

System.out.println("Navigating to the URL");
driver.get("[https://www.lambdatest.com/Selenium-playground/checkbox-demo](https://www.lambdatest.com/Selenium-playground/checkbox-demo)");

Шаг 2-а. В первом тестовом примере testSingleCheckbox мы получаем элемент checkbox, используя его ID-локатор.

WebElement checkbox = driver.findElement(By.id("isAgeSelected"));

Шаг 2-b. После этого применяется предварительная валидация, чтобы проверить, отображается ли данный флажок или нет, и на основании этого он выбирается с помощью метода click().

if(checkbox.isDisplayed())
{
 System.out.println("Checkbox is displayed. Clicking on it now");
 checkbox.click();
}

Шаг 2-c. После установки флажка применяется пост-валидация, чтобы убедиться, что флажок установлен.

if(checkbox.isSelected())
{
 System.out.println("Checkbox is checked");
}

Шаг 3-a. Переходим ко второму тестовому случаю testMultipleCheckbox, в нем мы реализовали логику прохождения по группе флажков с одинаковым именем класса для идентификации и взаимодействия с ними вместе с предварительной и последующей валидацией.

Шаг 3-б. Первым шагом в этом случае будет получение списка веб-элементов Checkbox с одинаковым именем класса и сохранение его в переменной типа List.

List<WebElement> checkboxes = driver.findElements(By.className("cb-element mr-10"));

Шаг 3-c. Далее мы используем цикл for, чтобы пройти по списку Checkboxes и выбрать их все по одному после проверки того, что Checkbox отображается и с ним можно взаимодействовать.

for(int i=0; i<checkboxes.size(); i++)
{
 if(checkboxes.get(i).isDisplayed() && checkboxes.get(i).isEnabled())
 {
  checkboxes.get(i).click();
 }
}

Шаг 3-д. После проверки всех флажков, следующий код должен отменить выбор флажка с индексом 1 из списка, а затем выполнить пост-валидацию, чтобы проверить, снят ли флажок после щелчка или нет.

checkboxes.get(1).click();
if(checkboxes.get(1).isSelected())
{
 System.out.println("Checkbox is still selected");
}
else
{
 System.out.println("Checkbox is deselected successfully");
}

Таким образом, мы разобрали весь код и реализацию тестового класса. Давайте продолжим, чтобы увидеть результаты выполнения на локальной панели и на панели LambdaTest.

Этот учебник по автоматизации тестирования Cypress поможет вам узнать о преимуществах автоматизации Cypress.

Выполнение теста

До сих пор в этом блоге о том, как выбрать несколько флажков в Selenium WebDriver с помощью Java, мы рассмотрели и поняли различные способы нахождения, взаимодействия и реализации кода для автоматизации Checkboxes. Теперь мы переходим к выполнению кода, как обсуждалось в предыдущих разделах.

Поскольку созданный проект является проектом TestNG, мы выполняем кейсы как TestNG и наблюдаем за выводом на локальной панели и на панели LambdaTest, где мы можем видеть детали выполнения.

Для тестового случая 1: testSingleCheckbox

Более подробные логи и пошаговое выполнение команд можно увидеть на приборной панели LambdaTest, перейдя к тесту.

Для тестового случая 2: testMultipleCheckbox

Чтобы использовать расширенные инструменты для анализа производительности ваших тестов, перейдите на панель LambdaTest Analytics Dashboard. Вы можете увидеть все результаты тестирования, их статус, а также общее количество пройденных и проваленных тестов в области Test Summary. Кроме того, вы можете увидеть снимки недавно выполненных тестов в разделе Обзор тестов.

Если вы разработчик или тестировщик, желающий усовершенствовать свои навыки работы с Selenium на Java, сертификация LambdaTest Selenium Java 101 поможет вам в этом.

Вот краткий обзор сертификации Selenium Java 101 от LambdaTest:

Заключение

Мы завершили блог о том, как выбрать несколько флажков в Selenium WebDriver с помощью Java. В нем мы узнали о различных стратегиях локатора флажков на основе реализации на веб-странице и о том, как мы можем взаимодействовать с ними при выполнении автоматизированного тестирования пользовательского интерфейса.

Этот блог также объясняет предварительную и последующую валидацию при работе с флажками в Selenium WebDriver и их выполнение в облачной Selenium Grid, такой как LambdaTest, при проведении автоматизированного тестирования Selenium.

Теперь вы должны быть достаточно уверены, чтобы работать с несколькими флажками в своем проекте. Так что вперед и начинайте проверять некоторые флажки.

Счастливой проверки!!!