"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", h3: "h3", p: "p", pre: "pre", ..._provideComponents(), ...props.components }, {Note} = _components; if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "introduction", children: "Introduction" }), "\n", _jsx(_components.p, { children: "Checkboxes allow users to select one or more options from a limited set of choices." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n I have a cat
\n\n I have a dog
\n\n I have a rabbit

\n" }) }), "\n", _jsx(_components.h1, { id: "assert-if-a-checkbox-element-is-checked", children: "Assert if a Checkbox element is checked" }), "\n", _jsxs(_components.p, { children: ["If the checkbox element is checked, it will have a ", _jsx(_components.code, { children: "checked" }), " attribute:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "In order to determine if the checkbox element is checked or not, you have to verify if the checked attribute is present." }), "\n", _jsx(_components.p, { children: "That can be achieved in 2 different ways:" }), "\n", _jsx(_components.h3, { id: "1-by-asserting-the-presence-of-the-checked-attribute", children: "1. By asserting the presence of the checked attribute" }), "\n", _jsxs(_components.p, { children: ["You can use the ", _jsx(_components.code, { children: "Element Contains Attribute" }), " assertion type from the ", _jsx(_components.code, { children: "Add Assertion" }), " action:"] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/assert_attribute_doc.jpg", border: "0", alt: "endtest assert checkbox", height: "100" }), "\n", _jsxs(_components.p, { children: ["Configure that assertion to verify if the checkbox element contains the ", _jsx(_components.code, { children: "checked" }), " attribute."] }), "\n", _jsx(_components.h3, { id: "2-by-using-javascript", children: "2. By using JavaScript" }), "\n", _jsxs(_components.p, { children: ["A different approach is to use an ", _jsx(_components.a, { href: "/docs/web-tests/execute-javascript", children: "Execute JavaScript" }), " step."] }), "\n", _jsxs(_components.p, { children: ["In that step, you can fetch the ", _jsx(_components.code, { children: "checked" }), " property of the checkbox element."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "isItChecked = document.querySelector(\"css-selector-of-your-checkbox\").checked;\n" }) }), "\n", _jsxs(Note, { children: ["Don't forget to replace the ", _jsx(_components.code, { children: "css-selector-of-your-checkbox" }), " string with the CSS Selector for your checkbox element."] }), "\n", _jsxs(_components.p, { children: ["That ", _jsx(_components.code, { children: "isItChecked" }), " JavaScript variable will have a value of ", _jsx(_components.code, { children: "true" }), " or ", _jsx(_components.code, { children: "false" }), ", depending if the checkbox element is checked or not."] }), "\n", _jsxs(_components.p, { children: ["We can add an assertion for that, but first we need to transfer the value from the ", _jsx(_components.code, { children: "isItChecked" }), " JavaScript variable to an Endtest variable."] }), "\n", _jsxs(_components.p, { children: ["That can be done with the ", _jsx(_components.code, { children: "Extract Value From JavaScript" }), " option from the ", _jsx(_components.code, { children: "Set Variable" }), " action."] }), "\n", _jsxs(_components.p, { children: ["After that, we can use the ", _jsx(_components.code, { children: "Variable Assertion" }), " option from the ", _jsx(_components.code, { children: "Add Assertion" }), " action to verify if the value is ", _jsx(_components.code, { children: "true" }), "."] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/assert_attribute_2_doc.jpg", border: "0", alt: "endtest test checkbox", height: "220" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

How to Test Checkboxes