Choose an option
{"ScriptPreparationCode":"const menu1 = document.querySelector(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-1\u0027]\u0060);\r\nfor (let i = 1; i \u003C= 30; i\u002B\u002B) {\r\n menu1.appendChild(createOptionItem(\u0060Option ${i}\u0060, 1));\r\n}\r\n\r\nconst menu2 = document.querySelector(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-2\u0027]\u0060);\r\nfor (let i = 1; i \u003C= 12; i\u002B\u002B) {\r\n menu2.appendChild(createOptionItem(\u0060Option ${i}\u0060, 2));\r\n}\r\n\r\nconst menu3 = document.querySelector(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-3\u0027]\u0060);\r\nfor (let i = 1; i \u003C= 125; i\u002B\u002B) {\r\n menu3.appendChild(createOptionItem(\u0060Option ${i}\u0060, 3));\r\n}\r\n\r\nfunction createOptionItem(content, menuType) {\r\n let optionItem = document.createElement(\u0027div\u0027);\r\n optionItem.setAttribute(\u0022class\u0022, \u0060option${menuType}\u0060);\r\n optionItem.setAttribute(\u0022role\u0022, \u0022option\u0022);\r\n optionItem.textContent = content;\r\n return optionItem;\r\n}","TestCases":[{"Name":"Simpler selector","Code":"const options1 = document.querySelectorAll(\u0060[class=\u0027option1\u0027]\u0060);\r\nfor (option of options1) {\r\n if (option.innerText === \u0027Option 30\u0027) {\r\n console.log(option);\r\n }\r\n}\r\n\r\nconst options2 = document.querySelectorAll(\u0060[class=\u0027option2\u0027]\u0060);\r\nfor (option of options2) {\r\n if (option.innerText === \u0027Option 12\u0027) {\r\n console.log(option);\r\n }\r\n}\r\n\r\nlet options3 = document.querySelectorAll(\u0060[class=\u0027option3\u0027]\u0060);\r\nfor (option of options3) {\r\n if (option.innerText === \u0027Option 125\u0027) {\r\n console.log(option);\r\n }\r\n}","IsDeferred":false},{"Name":"More complex selector","Code":"let options1 = document.querySelectorAll(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-1\u0027] [role=\u0027option\u0027]\u0060);\r\nfor (option of options1) {\r\n if (option.innerText === \u0027Option 30\u0027) {\r\n console.log(option);\r\n }\r\n}\r\n\r\nlet options2 = document.querySelectorAll(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-2\u0027] [role=\u0027option\u0027]\u0060);\r\nfor (option of options2) {\r\n if (option.innerText === \u0027Option 12\u0027) {\r\n console.log(option);\r\n }\r\n}\r\n\r\nlet options3 = document.querySelectorAll(\u0060[data-qa-id=\u0027listbox-menu-with-possibly-long-id-3\u0027] [role=\u0027option\u0027]\u0060);\r\nfor (option of options3) {\r\n if (option.innerText === \u0027Option 125\u0027) {\r\n console.log(option);\r\n }\r\n}","IsDeferred":false}]}