playwright python版本学习五–＞locator常用定位总结

本文介绍: playwright web ui 自动化常用定位总结

1, text = “xxx“这种写法,是需要文本完全匹配
 t=page.locator(“text=‘Lo g in button’”)
t.count() = 1 可匹配到一个元素
t=page.locator(“text=‘Log in’”)
t.count() = 0 未匹配到任何元素
 特殊写法 t=page.locator(”‘Log in button’”) 等价于 t=page.lo cator(“text=‘Log in button’”)

2, text = xxx 这种写法,是模糊匹配 t=page.lo cator(“text=Log in”)
t.count() = 2 可匹配到两个元素,这两个元素都包含Log in

3, te xt = /xxx/i 是正则匹配方法 t=page.lo cator(“te xt=/Log.*?button/i”)
t.count() = 1 可匹配一个元素

1,t = page.lo cator(“div.s ample2 :ha s-te xt(‘第四’)”) t.count() = 3 可匹配三个元素, 匹配从div.s ample2(结果不包含此层)开始到查到文本之间中所有层的元素

2,t=page.lo cator(“di v.s ample2 :te xt(‘第四’)”)
t.count() = 1可匹配到一个元素, 在selector di v.s ample2下包含文本第四的元素
selector :text(“xxx”) text的用法同上面的text = xxx

3,t=page.loc ator(“di v.s ample2 :text-i s(‘第四’)”)
t.count() = 0 未匹配到元素,原因是需要精确匹配 ,文本用法同上面的 text=‘XXX’
t=page.locator(“di v.s ample2 :text-i s(‘我是第四层’)”)
t.count() = 1 匹配到元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playwright 定位练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        p {
            font-size: 12px;
            color: rgb(6, 63, 170);
        }

        div.content>div {
            border: 2px solid greenyellow;
            width: 1000px;
            display: flex;
            flex-direction: column;
        }

        div.content>div div {
            left: 10px;
            position: relative;
            width: 500px;
        }
    </style>
</head>

<body>
    <h2>playwright locator 定位方法实践</h2>
    <div class="content">
        <div class="text-selector">
            <h3>Text selector--文本定位</h3>
            <hr>
            <h4>单独使用文本</h4>
            <div class="sample1">
                <input type="button" value="Log in button">
                <div class="button">Log in div</div>
            </div>
            <h4>配合css selector 使用文本</h4>
            <div class="sample2">我是第一层
                <div class="sample2_2">我是第二层
                    <div class="sample2_3">我是第三层
                        <div class="sample2_4">我是第四层</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="css-selector">
            <h3>CSS selector 定位</h3>
            <hr>
            <h4>只查找访问的元素</h4>
            <div class="css-sample1">
                <button style='display: none'>Invisible</button>
                <button>Visible</button>
            </div>
        </div>
        <div class="element-filter">
            <h3>定位一个元素时,通过某些条件过滤来指定</h3>
            <hr>
            <h4>通过文本来过滤</h4>
            <button class="filter-by-text" style="width: 200px;">click 我 me</button>
            <h4>通过后代元素来过滤</h4>
            <div class="filter-by-other-locator">
                <div class="grandson">这是后代元素</div>
            </div>
            <h4>selector中包含某个css selector的写法</h4>
            <div class="filter-by-cssSelector">
                <div class="mycss">
                    本div的class是mycss
                </div>
            </div>
        </div>
        <div class="augmenting-scope">
            <h3>定位到一组元素后,通过某一个特定内容来扩展定位</h3>
            <hr>
            <h4>定位到一组元素后,通过文本内容来扩展</h4>
            <div class="augment-by-text">
                <div class="augment" id="augment1">red</div>
                <div class="augment" id="augment2">black</div>
                <div class="augment" id="augment3">white</div>
                <div class="augment" id="augment4">gray</div>
            </div>

        </div>
        <div class="css-selector-list">
            <div class="more-choice-one">
                <div class="choice">我不看</div>
                <div class="choice">我看</div>
            </div>
        </div>
    </div>
</body>

</html>