可视化硒的焦点和相互作用

2024-05-13 20:44:21 发布

您现在位置：Python中文网/ 问答频道 /正文
7850 3

我想看看在测试期间如何与页面交互，例如，当前哪些元素具有焦点以及交互发生的位置（类似于Cypress UI所做的）

如何在Selenium for Python中最方便地实现这一点


Tags： 元素uiforselenium页面焦点cypress
1条回答
网友
1楼 · 发布于 2024-05-13 20:44:21

深受https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule#Function_to_add_a_stylesheet_rule的helper函数的启发，将全局样式表规则添加到我创建的页面add_css.js（在子文件夹helper_js）中：

/* global arguments */
(function (rules) {
    var styleEl = document.createElement("style");

    styleEl.classList.add("PART-OF-SELENIUM-TESTING");

    // Append <style> element to <head>
    document.head.appendChild(styleEl);

    // Grab style element's sheet
    var styleSheet = styleEl.sheet;

    for (var i = 0; i < rules.length; i++) {
        var j = 1,
            rule = rules[i],
            selector = rule[0],
            propStr = "";
        // If the second argument of a rule is an array of arrays, correct our variables.
        if (Array.isArray(rule[1][0])) {
            rule = rule[1];
            j = 0;
        }

        for (var pl = rule.length; j < pl; j++) {
            var prop = rule[j];
            propStr += prop[0] + ": " + prop[1] + (prop[2] ? " !important" : "") + ";\n";
        }

        // Insert CSS Rule
        styleSheet.insertRule(selector + "{" + propStr + "}", styleSheet.cssRules.length);
    }

}).apply(null, arguments);

然后我使用以下方法将其加载并注入页面：

import pkgutil
add_css = pkgutil.get_data("helper_js", "add_css.js").decode("utf8")

# ...

driver.execute_script(
    add_css,
    [
        [":active", ["outline", "3px dashed red", True]],
        [":focus", ["outline", "3px dashed yellow", True]],
        [":active:focus", ["outline", "3px dashed orange", True]],
    ]
)

以便为处于活动状态或具有焦点的元素添加全局样式

相关问题 更多 >

    编程相关推荐