How to simulate ctrl-click or shift-click with webdriver.io?

Question

With webdriver.io I would like to simulate clicks with a modifier like shift or ctrl. The keys() method seems to do something like that but it's not clear to me how to release a modifier key again and it throws an error when I use 16 (key code for shift) as a parameter for the method - link.

Background: In my webpage that I test I have a list of elements that are comparable to files and folders in a file browser and it is possible to select multiple of those with shift and ctrl. This works well and now I would like to test it with webdriver.io. To do this, webdriver.io e.g. has to click on an element, then press shift, then click on an other element and finally release the shift button. Is there any way to do that?

Answer 1

Edit: If you want to select different elements using ctrl key:

client.elements(<css selector for your list of elements>, function(err, res) {
    client
         .moveTo(res.value[<index of element you want to select>].ELEMENT, 0, 0)
         .keys('Ctrl') #every action after this within the scope of `client.elements` will have the `ctrl` key depressed
         .buttonPress('left')
         .moveTo(res.value[<index of element you want to select>].ELEMENT, 0, 0)
         .buttonPress('left')
         .moveTo(res.value[<index of element you want to select>].ELEMENT, 0, 0)
         .buttonPress('left')
         #repeat `.moveTo` and `.buttonPress` for every element you want to `ctrl` select
         .keys('NULL'); #This command or `.keys('Shift') will release the `shift` key.
});

To select using the shift key you use the code below (assuming you want to select every item in your list of elements -- obviously you can change the indexes to get a specific subsection of your list of elements). It will move to the top left of the first element in your list of elements, then left click, then hit the shift key, then move to the top left of the last element, left click again, and then release the shift key:

client.elements(<css selector for your list of elements>, function(err, res) {
    client
         .moveTo(res.value[0].ELEMENT, 0, 0)
         .buttonPress('left')
         .keys('Shift')
         .moveTo(res.value[(res.value.length-1)].ELEMENT, 0, 0)
         .buttonPress('left')
         .keys('NULL'); #This command or `.keys('Shift') will release the `shift` key.
});