交互
使用 Rize 您可以很简单地与页面和元素进行交互。
下面所有的例子都假设您已经创建 Rize
实例并访问到一个有效的页面。
与元素交互
如果要与元素交互,您必须提供指向您想要进行交互的元素的 CSS 选择器。
单击和鼠标悬浮
例如,我们有这样一个页面:
<button id="submit">
Submit!
</button>
我们可以单击那个按钮:
rize.click('#submit')
有时候您可能想为了查看某些效果,把鼠标悬浮在其上方而不是单击它,那么您可以调用 hover
方法:
rize.hover('#submit')
Rize 还提供 rightClick
方法和 doubleClick
方法。
输入文本
假设我们有这样一个页面:
<input name="character" type="text" />
利用 type
方法我们可以向那个 <input>
元素中输入文本:
rize.type('[name="character"]', 'Rize')
如果我们继续调用 type
方法,它不会清除已有的文本,只会在其后追回文本。
rize.type('[name="character"]', ' Tedeza')
// 现在 input 元素的值为“Rize Tedeza”
您可以使用 clear
方法来清除文本:
rize.clear('[name="character"]')
// input 元素上什么都没有啦
与表单交互
check(选择) 或 uncheck(取消选择)一个复选框很简单:
rize.check('input#item1[type="checkbox"]').uncheck('input#item2[type="checkbox"]')
选择一个单选按钮:
rize.radio('input#sex[type="radio"]', 'male')
radio
方法的第二个参数是您想要选择的单选按钮的值(value)。
选择下拉菜单中的一个或多个选项:
rize.select('select#food', 'vegetables') // 单选
rize.select('select#character', ['Rize', 'Syaro']) // 多选
往 <input type="file" />
是添加文件也很简单:
rize.uploadFile('input[type="file"]', 'my-file.png')
使用键盘
Rize 提供了三个方法(press
, keyDown
和 keyUp
)可以让您使用键盘。
按一个键:
rize.press('Enter')
或者根据需要触发 keydown
事件或 keyup
事件:
rize.keyDown('Enter')
rize.keyUp('Enter')
若要查看所有可用的按键,请前往 https://github.com/GoogleChrome/puppeteer/blob/master/lib/USKeyboardLayout.js
使用鼠标
您可以使用 mouseMoveTo
方法来移动鼠标:
rize.mouseMoveTo(50, 45)
按某个鼠标按键:
rize.mouseClick(1, 1)
rize.mouseClick(1, 1, { button: 'right' })
rize.mouseClick(1, 1, { clickCount: 2 })
rize.mouseClick(1, 1, { button: 'right', clickCount: 2 })
甚至按下或抬起某个鼠标按键:
rize.mouseDown() // 按下鼠标左键一次
rize.mouseDown('middle') // 按下鼠标中键一次
rize.mouseDown('right') // 按下鼠标右键一次
rize.mouseDown('left', 2) // 按下鼠标左键两次
rize.mouseDown('right', 2) // 按下鼠标右键两次