Interact With Page
It's easy to interact with page and elements by using Rize.
All the examples below supposed that you have created a Rize
instance and navigated to a valid page.
Interact with elements
To interact with elements, you should provide a valid CSS selector which points to the element you want to interact.
Click and hover
For example, we have a page like this:
<button id="submit">
Submit!
</button>
And we can click this button:
rize.click('#submit')
Sometimes you may want to hover on it instead of clicking on it to see something happened, and you just need to call hover
method:
rize.hover('#submit')
Rize also provides rightClick
method and doubleClick
method.
Typing some text
Let's suppose we have a page like this:
<input name="character" type="text" />
The way to typing some text on that <input>
element is call type
method:
rize.type('[name="character"]', 'Rize')
If you call type
method again, it won't clear existing text and it will append the new text to element.
rize.type('[name="character"]', ' Tedeza')
// Now the value of that element is "Rize Tedeza".
So you can call clear
method to clear the text.
rize.clear('[name="character"]')
// Nothing on that element now.
Interact with forms
It is easy to check or uncheck a checkbox:
rize.check('input#item1[type="checkbox"]').uncheck('input#item2[type="checkbox"]')
Select a radio button:
rize.radio('input#sex[type="radio"]', 'male')
The second argument of radio
method is the value of the radio button you want to select.
Choose one or more items of dropdown:
rize.select('select#food', 'vegetables') // For single choice
rize.select('select#character', ['Rize', 'Syaro']) // For multiple choices
Attaching a file to an <input type="file" />
is also easy.
rize.uploadFile('input[type="file"]', 'my-file.png')
Working with keyboard
Rize provides three methods (press
, keyDown
and keyUp
) to let you work with keyboard.
Just press a key:
rize.press('Enter')
Or dispatch a keydown
event or keyup
event as you need:
rize.keyDown('Enter')
rize.keyUp('Enter')
To check out all available keys, please visit https://github.com/GoogleChrome/puppeteer/blob/master/lib/USKeyboardLayout.js
Working with mouse
You can use mouseMoveTo
method to move mouse:
rize.mouseMoveTo(50, 45)
Or click a mouse button:
rize.mouseClick(1, 1)
rize.mouseClick(1, 1, { button: 'right' })
rize.mouseClick(1, 1, { clickCount: 2 })
rize.mouseClick(1, 1, { button: 'right', clickCount: 2 })
Even "down" a mouse button or "up" a mouse button:
rize.mouseDown() // Keep down "left" button once.
rize.mouseDown('middle') // Keep down "middle" button once.
rize.mouseDown('right') // Keep down "right" button once.
rize.mouseDown('left', 2) // Keep down "left" button twice.
rize.mouseDown('right', 2) // Keep down "right" button twice.
The usage of mouseUp
method is same as the mouseDown
method.