Unable to physically tap on the checkbox input, though able to perceive the value it holds

Question

Unable to physically tap on the checkbox input, though able to perceive the value it holds

When running my protractor test, I encountered an issue with the following statement:

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

The test failed and returned an error message stating "ElementNotVisibleError: element not visible". This is puzzling because a previous assertion that I included for debugging purposes, which checks if the element is present, actually passed:

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

Why would this happen? Interestingly, if I omit the first assertion, the subsequent assertion to read the checkbox value works fine:

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

For reference, the checkbox and its parent element are defined as follows:

<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>

javascript angularjs selenium selenium-webdriver protractor

Answer 1

Answer №1

If you want to interact with radio or checkbox buttons using JavaScript executor, you can do so without worrying about the element's clickable state.

Alternatively, you can click on the label or span element that is nested within the input element directly.

For example:

Using 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);
    }
}

Or simply click normally (in your specific case).

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

Answer 2

If you want to interact with radio or checkbox buttons using JavaScript executor, you can do so without worrying about the element's clickable state.

Alternatively, you can click on the label or span element that is nested within the input element directly.

For example:

Using 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);
    }
}

Or simply click normally (in your specific case).

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

Answer 3

Answer №2

When dealing with an input tag that may have zero height, it is essentially invisible but still present in the DOM for interaction.

In this case, we need to click on the label containing the input tag, rather than directly clicking on the input tag itself.

Attempting to click on by.modal('modalvalue') of Protractor JS will target the element with a CSS locator like

[ng-model='publishCtrl.isPublishedInAllRegions']

, returning the input button instead of the label.

To locate the unique value with ng-modal in Angular, we can use an xpath approach:

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

However, if the ng-click is only configured for the input tag, which triggers onclick events, then try the suggestion above and provide feedback.

If the solution does not work, you can directly click on the anchor by executing JavaScript using a JavaScript executor when it is not visible:

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

or simply utilize jQuery for direct execution:

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

Answer 4

When dealing with an input tag that may have zero height, it is essentially invisible but still present in the DOM for interaction.

In this case, we need to click on the label containing the input tag, rather than directly clicking on the input tag itself.

Attempting to click on by.modal('modalvalue') of Protractor JS will target the element with a CSS locator like

[ng-model='publishCtrl.isPublishedInAllRegions']

, returning the input button instead of the label.

To locate the unique value with ng-modal in Angular, we can use an xpath approach:

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

However, if the ng-click is only configured for the input tag, which triggers onclick events, then try the suggestion above and provide feedback.

If the solution does not work, you can directly click on the anchor by executing JavaScript using a JavaScript executor when it is not visible:

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

or simply utilize jQuery for direct execution:

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

Answer 5

Answer №3

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

To confirm the selection

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

I trust that the information above will assist you. Consider utilizing CSS for locating elements as it is recommended for Protractor testing.

Answer 6

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

To confirm the selection

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

I trust that the information above will assist you. Consider utilizing CSS for locating elements as it is recommended for Protractor testing.

Unable to physically tap on the checkbox input, though able to perceive the value it holds

Answer №1

Answer №2

Answer №3

Similar questions

Issues with routeparams are preventing ng-repeat from functioning properly, without any response or resolution

Troubleshooting the error message: "Unable to add or update a child row due to a foreign key constraint failure"

Embed an angular directive into HTML dynamically

How to effectively merge DefaultTheme with styled-components in TypeScript?

In Nodejs, the value of req.headers['authorization'] is not defined when using JWT (JSON Web Token)

Utilizing Angular JS within a callback function from an external source

JavaScript: Different ways to utilize the reduce method

Having trouble getting the finally clause to work properly in Angular JS version 1.7

Adding a dynamic form to each row in a table: A step-by-step guide

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

AngularJS's ScrollTo function allows users to scroll to a specific

Is the MVC pattern adhered to by ExpressJS?

Tips for handling a login window that pops up after a session expires in Selenium

Issue "cannot update headers after they have been sent"

What is the safest way to convert a local file path to a file:// URL in Node.js?

Ensure that each page completely loads before proceeding in Selenium

Guidelines for iterating through a nested JSON array and extracting a search query in Angular

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

In a peculiar occurrence, the behavior of array.splice is exhibiting unusual characteristics within an

Learn how to iterate over an array and display items with a specific class when clicked using jQuery