影刀小技巧-如何确认是否勾选了复选框

背景

开发者在勾选复选框之后，有时候页面没有发生变化，开发者为了保险起见，想保证复选框已经勾选了，这样才能放心进行下一步的操作，那么该如何确保是否复选框是否已经勾选了呢？



如图一，做勾选的时候页面并没有其他元素发生变化，通过判断网页是否包含/存在其他元素并不能判断该复选框是否做勾选，这时候应该怎么确认已经做了勾选呢？

解决方案

解决方案一：判断元素属性是否存在变化



通过网页源码发现，勾选后元素class属性发生变化，那么可以以勾选后是否存在这个属性来做判断。如下图所示





需注意的是，该元素的class属性元素编辑里不可勾选。



解决方案二：判断是否存在伪元素

如解决方案一中，如果是元素属性发生了变化，则比较容易判断，如果元素属性没有发生变化应该怎么处理呢？如图六、图七，元素的一些属性并没有发生变化，只是多了一个伪类元素::after





那是否可以通过判断伪类元素是否存在来判断是否勾选了复选框。伪类元素有一个很重要的特征是会有一个content值，判断是否有content值即可，这时候需要用到js来处理。





如上图八、图九，当执行的结果为none时，则表示复选框没有选上。

js代码为：

var mydivAfter=window.getComputedStyle(element,'::after'); var content=mydivAfter.content return content;