Playwright——界面操作

元素通用操作

获取文本内容

前面我们学过 通过 Locator对象的 inner_text() 方法 可以获取元素的内部文本，如果Locator选择到的元素是多个，可以使用 all_inner_texts 获取所有匹配的文本，放到列表中返回。

上面者两个方法返回的都是元素内部的可见文本。
html元素内部还可以包括不可见的文本，比如：

<p id="source">
  <span id='text'>看一下<br>这个内容<br>如何变化</span>
  <span style="display:none">隐藏内容</span>
</p>

要获取p元素内部所有内容，包括隐藏内容，可以用 Locator对象的 text_content() 或者 all_text_contents() 方法 获取单个或者多个匹配对象文本，如下所示：

lc = page.locator("#source")
print('innerText:',   lc.inner_text())
print('--------------')
print('textContent:', lc.text_content())

可以对比一下区别。

获取元素属性

获取元素的属性值，可以使用 Locator对象的 get_attribute 方法

获取元素内部Html

获取元素内部的整个html文本， 可以使用 Locator对象的 inner_html 方法

点击

前面讲过的Locator对象的click方法，是单击元素，如果要双击 ，可以使用 dblclick方法。

悬停

让光标悬停在某个元素上方，可以使用 Locator对象的 hover 方法。

等待元素可见

前面讲过，Playwright通过Locator对元素进行操作时，如果元素当前还没有出现，缺省就会等待30秒。但是，有时我们的代码并不是要操作这个元素，而是要等待这个元素出现后，进行别的操作。这时，可以使用 Locator对象的 wait_for 方法，比如：

page.locator("#source").wait_for()

该方法有个参数 state ，缺省值为 ‘visible’ ， 就是等待元素可见。如果值为 ‘hidden’ 就是等待该元素消失。等待时长为全局设定的时长， 缺省为 30秒，如果要修改，可以使用参数 timeout。超出时长，元素还没有出现在界面上，会抛出错误。

判断元素是否可见

有时，我们的自动化代码需要根据当前界面中，是否存在某些内容 ，来决定下一步操作。这时，可以使用 Locator对象的 is_visible 方法，比如：

page.locator("#source").is_visible()

该方法不会等待元素出现，而是立即返回 True 或 False 。

输入框操作

文本框输入

单行文本框 input 或者多行文本框 textarea 都可以使用 Locator对象的fill方法进行输入。

文本框清空

要清空单行文本框 input 或者多行文本框 textarea 的内容，都可以使用 Locator对象的 clear 方法。

获取输入框里面的文字

如果要获取输入框 ， 对应的用户输入文本内容，不能用 inner_text() 方法，而是应该用 input_value 方法。

文件输入框

html中有文件类型的输入框，用于指定本地文件，通常用于上传文件。

<input type="file" multiple="multiple">

要设置选中的文件，可以使用 Locator 对象的 set_input_files 方法。，比如：

# 先定位
lc = page.locator('input[type=file]')

# 单选一个文件
lc.set_input_files('d:/1.png')

# 或者 多选 文件
lc.set_input_files(['d:/1.png', 'd:/2.jpg'])

radio单选/checkbox多选

并且按F12，观察HTML的内容，常见的选择框包括： radio框、checkbox框、select框。radio 是常见的点选元素，比如, 下面的 html：

<div id="s_radio">
  <input type="radio" name="teacher" value="小江老师">小江老师<br>
  <input type="radio" name="teacher" value="小雷老师">小雷老师<br>
  <input type="radio" name="teacher" value="小凯老师" checked="checked">小凯老师
</div>

如果要点选 radio框， 可以使用 Locator对象的 check 方法。
如果要取消选择 radio框， 可以使用 Locator对象的 uncheck 方法。
如果我们要判断 radio框 是否选中，可以使用 Locator对象的 is_checked 方法。
假设，我们对上面html中的 radio 输入框

• 先打印当前选中的老师名字
• 再选择 小雷老师

对应的代码如下：

# 获取当前选中的元素
lcs = page.locator('#s_radio input[name="teacher"]:checked').all()
teachers = [lc.get_attribute('value')  for lc in lcs ]
print('当前选中的是:', ' '.join(teachers))

# 确保点选 小雷老师
page.locator("#s_radio input[value='小雷老师']").check()

checkbox是常见的勾选元素，比如, 下面的html：

<div id="s_checkbox">
  <input type="checkbox" name="teacher" value="小江老师" checked="checked">小江老师<br>
  <input type="checkbox" name="teacher" value="小雷老师">小雷老师<br>
  <input type="checkbox" name="teacher" value="小凯老师" checked="checked">小凯老师
</div>

和radio input一样，如果要点选 checkbox框， 可以使用 Locator对象的 check方法，如果要取消选择 checkbox框， 可以使用 Locator对象的 uncheck方法，如果我们要判断 checkbox 框 是否选中，可以使用 Locator对象的 is_checked方法，比如, 我们要在前面面的html中

• 先打印当前选中的老师名字
• 再选择小雷老师
  对应的代码如下：

# 获取当前选中的元素
lcs = page.locator('#s_checkbox input[name="teacher"]:checked').all()
teachers = [lc.get_attribute('value')  for lc in lcs ]
print('当前选中的是:', ' '.join(teachers))

# 点选 小雷老师
page.locator("#s_checkbox input[value='小雷老师']").click()

select元素操作

adio框及checkbox框都是input元素，只是里面的type不同而已。
select框 则是一个新的select标签，大家可以对照浏览器网页内容查看一下
要选择选项，可以使用 select 元素对应的 Locator对象的 select_option 方法。

select单选框

对于 select单选框，不管原来选的是什么，直接用Select方法选择即可。
例如，选择示例里面的小江老师，示例代码如下：

page.locator('#ss_single').select_option('小江老师')

这里select_option参数是选项 option元素的value或者选项文本，要完全匹配。
也可以使用关键字参数 index , value , label 指定分别根据 索引，value属性， 选项文本进行匹配，比如：

# 根据 索引 选择， 从0 开始， 但是为0的时候，好像有bug
page.locator('#ss_single').select_option(index=1)

# 根据 value属性 选择
page.locator('#ss_single').select_option(value='小江老师')

# 根据 选项文本 选择
page.locator('#ss_single').select_option(label='小江老师')

# 清空所有选择
page.locator('#ss_single').select_option([])

select多选框

对于select多选框，要选中某几个选项，同样可以使用上面的方法，参数为包含多个值的列表即可，比如：

# 根据 value属性 或者 选项文本 多选
page.locator('#ss_multi').select_option(['小江老师', '小雷老师'])

# 根据 value属性 多选
page.locator('#ss_multi').select_option(value=['小江老师', '小雷老师'])

# 根据 选项文本 多选
page.locator('#ss_multi').select_option(label=['小江老师', '小雷老师'])

# 清空所有选择
page.locator('#ss_multi').select_option([])

注意，原来已经选中的选项，没有出现在 参数里面的，自动被清除选择。

获取select选中选项

同样可以通过css selector 表达式 :checked 伪选择 获取所有选中的 select选项，比如：

page.locator('#ss_multi').select_option(['小江老师','小雷老师'])

lcs = page.locator('#ss_multi option:checked').all_inner_texts()
print(lcs)

网页操作

打开网址/刷新/前进/后退

要打开网址/刷新/前进/后退，可以分别调用 Page 对象的 goto/reload/go_back/go_forward方法。

获取网页Html

要获取整个网页对应的HTML，可以调用Page对象的content方法。

title

要获取整个网页的标题栏文本 ， 可以调用Page对象的title方法。

set-viewport-size

要设置页面大小，可以调用 Page 对象的 set_viewport_size 方法，比如：

page.set_viewport_size({"width": 640, "height": 480})

设置宽度/高度的单位是像素 。