如何用javascript点击网页上的单选按钮

Question

我正试图在Invisalign的web应用程序中自动化一堆重复任务(用于牙齿对齐(。每次我提交修改案例时，都需要点击4次(3个按钮和1个单选按钮(，然后重新加载页面，再点击两次。

我的点击操作还可以，但我很难使用单选按钮。对于第一个按钮，我使用以下内容：

document.querySelector("button[type='button'][data-qa-name='approve-proceed-button']").click();

单击后，必须选择一个单选按钮。我正试图将数据qa-checked＝从"；false"；至"；真"；(见下文(

<div class=-"c012081"
<div class="c012081 c01912">
<label class="c01914 c012082 c01913" tabindex="-1">
<input class="c01917" type="radio" value="leaveAsIs">
<div class="c01918" data-qa-name="inspection-panel-warning-leave-as-is" data-qa-checked="true">
<svg class="c01920 c0189 c0192" viewBox="0 0 16 16"><path d="M8,1.33333333 C11.68,1.33333333 14.6666667,4.32 14.6666667,8 C14.6666667,11.68 11.68,14.6666667 8,14.6666667 C4.32,14.6666667 1.33333333,11.68 1.33333333,8 C1.33333333,4.32 4.32,1.33333333 8,1.33333333 Z M8,13.3333333 C10.9466667,13.3333333 13.3333333,10.9466667 13.3333333,8 C13.3333333,5.05333333 10.9466667,2.66666667 8,2.66666667 C5.05333333,2.66666667 2.66666667,5.05333333 2.66666667,8 C2.66666667,10.9466667 5.05333333,13.3333333 8,13.3333333 Z M8,11.3333333 C6.15905083,11.3333333 4.66666667,9.84094917 4.66666667,8 C4.66666667,6.15905083 6.15905083,4.66666667 8,4.66666667 C9.84094917,4.66666667 11.3333333,6.15905083 11.3333333,8 C11.3333333,9.84094917 9.84094917,11.3333333 8,11.3333333 Z"></path></svg>
</div>
<span class="c01921 c01921">Leave as is</span>
</label>
<label class="c01914 c012082 c01913" tabindex="-1"><input class="c01917" type="radio" value="fixForMe"><div class="c01918" data-qa-name="inspection-panel-warning-fix-for-me" data-qa-checked="false"><svg class="c01920 c0189 c0192" viewBox="0 0 16 16"><path d="M8,1.33333333 C4.32,1.33333333 1.33333333,4.32 1.33333333,8 C1.33333333,11.68 4.32,14.6666667 8,14.6666667 C11.68,14.6666667 14.6666667,11.68 14.6666667,8 C14.6666667,4.32 11.68,1.33333333 8,1.33333333 Z M8,13.3333333 C5.05333333,13.3333333 2.66666667,10.9466667 2.66666667,8 C2.66666667,5.05333333 5.05333333,2.66666667 8,2.66666667 C10.9466667,2.66666667 13.3333333,5.05333333 13.3333333,8 C13.3333333,10.9466667 10.9466667,13.3333333 8,13.3333333 Z"></path></svg></div><span class="c01921 c01921">Fix for me</span>
</label>
</div>

我一直在尝试一些类似的东西：

document.querySelectorAll("button[type='radio']")].find(function (ele) {return ele.innerText === "inspection-panel-warning-leave-as-is"})).click();

或

document.querySelector("radio[type='radio'][data-qa-name='inspection-panel-warning-leave-as-is']").checked = true;

我确信有一个非常简单的解决方案，但经过反复尝试，我还是无法使其发挥作用。

最后一部分是，我想设置一个以秒为单位的延迟，或者直到加载下一个页面才能单击下一个按钮(使用第一个代码示例(。如果我能得到它，它会把所有的东西放在一起。我真的希望有人能帮我解决这个问题。这是一个非常棒的社区。提前感谢您的帮助。我喜欢把这些东西组合在一起。

Answer 1

使用正确的选择器

您的收音机是一个input元件，带有一种类型的收音机<input class="c01917" type="radio" value="leaveAsIs">

在选择器中，您试图找到button元素，甚至是某种类型的radio元素。

您需要在选择器中找到具有某种类型无线电的input，并可以选择具有更高特异性的类别document.querySelector('input[type="radio"].c01917')。

const radio = document.querySelector('input[type="radio"].c01917');
radio.checked = true;

<div class=-"c012081"
<div class="c012081 c01912">
<label class="c01914 c012082 c01913" tabindex="-1">
<input class="c01917" type="radio" value="leaveAsIs">
<div class="c01918" data-qa-name="inspection-panel-warning-leave-as-is" data-qa-checked="true">
<svg class="c01920 c0189 c0192" viewBox="0 0 16 16"><path d="M8,1.33333333 C11.68,1.33333333 14.6666667,4.32 14.6666667,8 C14.6666667,11.68 11.68,14.6666667 8,14.6666667 C4.32,14.6666667 1.33333333,11.68 1.33333333,8 C1.33333333,4.32 4.32,1.33333333 8,1.33333333 Z M8,13.3333333 C10.9466667,13.3333333 13.3333333,10.9466667 13.3333333,8 C13.3333333,5.05333333 10.9466667,2.66666667 8,2.66666667 C5.05333333,2.66666667 2.66666667,5.05333333 2.66666667,8 C2.66666667,10.9466667 5.05333333,13.3333333 8,13.3333333 Z M8,11.3333333 C6.15905083,11.3333333 4.66666667,9.84094917 4.66666667,8 C4.66666667,6.15905083 6.15905083,4.66666667 8,4.66666667 C9.84094917,4.66666667 11.3333333,6.15905083 11.3333333,8 C11.3333333,9.84094917 9.84094917,11.3333333 8,11.3333333 Z"></path></svg>
</div>
<span class="c01921 c01921">Leave as is</span>
</label>
<label class="c01914 c012082 c01913" tabindex="-1"><input class="c01917" type="radio" value="fixForMe"><div class="c01918" data-qa-name="inspection-panel-warning-fix-for-me" data-qa-checked="false"><svg class="c01920 c0189 c0192" viewBox="0 0 16 16"><path d="M8,1.33333333 C4.32,1.33333333 1.33333333,4.32 1.33333333,8 C1.33333333,11.68 4.32,14.6666667 8,14.6666667 C11.68,14.6666667 14.6666667,11.68 14.6666667,8 C14.6666667,4.32 11.68,1.33333333 8,1.33333333 Z M8,13.3333333 C5.05333333,13.3333333 2.66666667,10.9466667 2.66666667,8 C2.66666667,5.05333333 5.05333333,2.66666667 8,2.66666667 C10.9466667,2.66666667 13.3333333,5.05333333 13.3333333,8 C13.3333333,10.9466667 10.9466667,13.3333333 8,13.3333333 Z"></path></svg></div><span class="c01921 c01921">Fix for me</span>
</label>
</div>