Невозможно установить флажок для элемента ввода, но можно прочитать его значение

Question

В моем тесте транспортира оператор

await element(by.model('publishCtrl.isPublishedInAllRegions')) .click();

не может сказать "ElementNotVisibleError: элемент не виден"

, хотя предыдущее утверждение, которое я добавил для отладки этого

expect(await element(by.model('publishCtrl.isPublishedInAllRegions')).isPresent())
    .toBeTruthy();

работает.Почему это происходит?Также, если я не напишу это утверждение, то работает более позднее утверждение для чтения значения флажка:

expect(await element(by.model('publishCtrl.isPublishedInAllRegions'))
        .getAttribute('value'))
 .toBeTruthy();

Определение флажка вместе с его родительским элементом:

<label ng-transclude="" pan-form-option-type="checkbox" class="p6n-checkbox p6n-checkbox-label">
  <input type="checkbox" ng-model="publishCtrl.isPublishedInAllRegions" ng-click="publishCtrl.toggleAllRegionsSelection()" ng-required="!publishCtrl.publishedRegionsCount" class="ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" jslog="47386;track:generic_click" aria-invalid="false">
  <span class="p6n-form-label" ng-transclude=""> All regions </span> 
</label>

Answer 1

Еще один способ щелкнуть по элементу ввода кнопок радио / флажков - с помощью javascript executor.Ему все равно, если элемент не активируется или другое состояние.

Или вы можете обычно щелкнуть элемент метки / диапазона, который обернут внутри элемента ввода.

Вот пример:

JS click:

export async function jsClickButton(button: ElementFinder) {

    try {
        return await browser.executeScript('arguments[0].click()', button).then(async() => {
            console.log('Element has been clicked.');
        });
    } catch (error) {
        console.log('Element could not be clicked', error);
    }
}

Или обычный щелчок (в вашем случае).

await  element(by.xpath('//input[@ng-model=\'publishCtrl.isPublishedInAllRegions\']/following-sibling::span')).click();

Answer 2

await element(by.css('input[type="checkbox"]')) .click();  

И для утверждения

  expect(await element(by.css('input[type="checkbox"]')).getAttribute('value').isDisplayed().then((value: boolean) =>{
    expect(value).toBe(true);
    });

Надеюсь, что приведенные выше ответы помогут вам.Попробуйте использовать CSS для поиска элементов.Рекомендуется для транспортира.

Answer 3

Здесь входной тег может иметь нулевую высоту, что буквально означает невидимый.Но он присутствует в DOM, и вы можете взаимодействовать.

Здесь мы должны щелкнуть метку с тегом ввода вместо нажатия на тег ввода.

Вы не можете щелкнуть по этому by.modal('modalvalue') протектора js, который inturn получит доступ к элементу с помощью локатора css как [ng-model='publishCtrl.isPublishedInAllRegions'].Это возвращает кнопку ввода, а не метку

Чтобы найти значение с помощью ng-modal, уникальное для угловых значений, мы можем написать xpath, например,

  await  element(by.xpath("//a[@ng-modal='publishCtrl.isPublishedInAllRegions']/parent::label")).click()

Но я также вижу ng-Клик настраивается только для ввода тега, который имитирует клик.Пожалуйста, попробуйте предложение выше и добавьте свой комментарий.

Если это не работает, щелкните привязку напрямую, выполнив javascript с использованием javascript executor, так как он не отображается.

var element =element(by.xpath("//a[@ng-modal='publishCtrl.isPublishedInAllRegions']");
browser.executeScript("arguments[0].click()",element);

или просто с помощью jquery

browser.executeScript("$(\"input[ng-modal='publishCtrl.isPublishedInAllRegions'])\").click()",element);