Determine the status of a checkbox in Protractor with JavaScript: Checked or Unchecked?

I'm currently facing a challenge while writing an end-to-end Protractor test. I need to verify whether a checkbox is enabled or not, but it doesn't have a 'checked' property. Is there a way in JavaScript to iterate through a list, check if an element is checked, and retrieve its corresponding text?

Below is the HTML snippet:

<li>

<div _ngcontent-c8="" class="ng-tns-c8-2" >

<input _ngcontent-c8="" class="ng-tns-c8-2" type="checkbox" id="Team TableAccepted">

<label _ngcontent-c8="" class="ng-tns-c8-2" for="Team TableAccepted">Accepted</label></div>

</li>

javascriptprotractor

Answer №1

For checking if the checkbox is selected, you can use the <code>isSelected()
method like so:

Here is an example input: 

<input type="checkbox" id="team" />

To verify its selection status, you would write the following assertion:

const checkbox = element(by.id('team'));

expect(checkbox.isSelected()).toBe(true);

If you prefer using vanilla JavaScript over Protractor, here's an alternative approach:

const isChecked = document.getElementById('team').checked;

It's important to note that both HTML4 and HTML5 do not permit spaces in the id attribute values. Therefore, in your specific case with the input: 

<input _ngcontent-c8="" class="ng-tns-c8-2" type="checkbox" id="Team TableAccepted">
, having id="Team TableAccepted" is invalid HTML syntax. Remember to restrict id values to a single descriptor.

I trust this information proves useful for your requirements!

Answer №2

There are two methods to verify if the checkbox is selected or not

  1. Using the isSelected() command
  2. Checking the attribute aria-checked for true/false (For material components)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"An error occurred stating that currDateEnd.setHours is not a valid function

I am attempting to transform my date into ISO format and adjust the hours to 23. Below is my code: var currDateEnd = $('#calendar').fullCalendar('getView').start; console.log(currDateEnd); currDateEnd.toDate().toISOString(); console.lo ...

javascriptmomentjs

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

javascripthtmlangularjscss

guide to importing svg file with absolute path

I have been attempting to load SVG files from my LocalDrive using an absolute path. Despite successfully achieving this with a relative path, the same method does not work when utilizing an absolute path. <script> $(document).ready(functio ...

javascriptjquerysvg

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

javascriptreactjs

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Despite finding numerous articles and solutions, my code still refuses to work. What could I be overlooking? Below is a snippet of the code where the crucial part is marked at the comment '! HERE') <!-- Table with grades --> <table clas ...

javascriptphpjquerybootstrap-4

Experiencing issues with a blank or non-functional DataGrid in Material UI components

My DataGrid table is showing blank. I experienced the same problem in a previous project and recreated it in a new one with updated versions of django and mui libraries. Here is an example of my data displayed with DataGrid not working I posted a bug rep ...

javascriptmaterial-uidatagrid

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

javascripttypescriptwebpackvue.js

Instructions for arranging dropdown options alphabetically with html, vue, and js

When working with JavaScript, is there a method to populate an options list from a database and then sort it alphabetically? ...

javascripthtmlvue.jsvue-component

Utilizing JSON data to create dynamic HTML content for Isotope.js filtering

UPDATE: After struggling to understand the previous answers, I have revised this question for clarity. As a beginner, I hope this simplified version can benefit others like me... I want to utilize isotope.js to showcase specific data from a JSON source (r ...

javascriptjqueryjson

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

javascriptjqueryhtmlemail

Optimizing load behavior in React using Node.js Express and SQL operations

As someone who is fairly new to programming, I have a question regarding the connection between server and client sides in applications like React and other JavaScript frameworks. Currently, I am working with a MySQL database where I expose a table as an ...

javascriptsqlnode.jsreactjsexpress

How can items be categorized by their color, size, and design?

[{ boxNoFrom: 1, boxs: [{…}], color: "ESPRESSO", size: "2X", style: "ZIP UP" { boxNoFrom: 13, boxs: [{…}], color: "ESPRESSO", size: "2X", style: "ZIP UP" }, { boxNoFrom: ...

javascriptarraystypescriptobjectgroup-by

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

javascriptcssreactjsmaterial-ui

"Identifying Mouse Inactivity in React: A Guide to Detecting When the Mouse

I need to dynamically control the visibility of a button element based on mouse movement. I am able to show the button when the mouse is moving using onMouseMove, but I'm stuck on how to hide it when the mouse stops moving. React doesn't have an ...

javascriptreactjsmouseevent

Use Ramda to convert an array of objects into nested objects

As a beginner, please forgive me for asking what may be considered a naive question. I currently have an array of objects const arr = [{id: 1, name: 'Pete'}, {id: 5, name: 'John'}, {id: 3, name: 'Peter'}] and I am looking to ...

javascripttypescriptramda.js

Developing a TypeScript library through modular class implementation

I have developed a Web API and now I want to streamline my code by creating a library that can be reused in any new project I create that interacts with this API. My goal is to organize my code efficiently, so I plan to have separate classes for each endp ...

javascripttypescripttypescript-typings

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

javascriptjqueryhtmlajax

Ways to clearly establish the concept of "a"

module.exports.getData = function (id) { const userData = require("./data/Users.json"); if (userData.find(user => user.uid === id)) { return user.name; } else return "User"; } I'm trying to display the name of a user, but the consol ...

javascriptnode.jsjson

Encountering a post route error when utilizing async await has hindered my ability to add a new product

Recently, I attempted to update my post route using async await, and unfortunately made some mistakes. Now I'm unsure how to correct it properly. router.post('/', async (req, res, next)=> { try{ const updatedProduct = await ...

javascriptnode.jsexpress

Invoke Selenium using JavaScript

Imagine I have this (fictional) JavaScript snippet: asynchronousOperation.addEventListener("completed", function (event) { if (event.property == "required value") tell Selenium we are good; else tell Selenium the test failed; }); ...

javascriptpythonselenium