6

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?

jezrael
  • 629,482
  • 62
  • 918
  • 895
Sandro
  • 1,551
  • 1
  • 17
  • 26
  • `client.keys('Shift').buttonPress();` ? – Stan E May 06 '15 at 16:31
  • `buttonPress()` (or `buttonDown()` and `buttonUp()` ) sadly is for the mouse and not for the modifier key. – Sandro May 06 '15 at 21:00
  • but what do you mean "for modifier key"? I will try that tomorrow :) – Stan E May 06 '15 at 21:07
  • I would like to simulate ctrl-click. So I guess there should be something like ctrl_key_down==>click==>ctrl_key_up. – Sandro May 07 '15 at 09:53
  • 1
    Edited my answer to include `ctrl` click and how to release modifier key. (Should release modifier keys by getting out of scope of `client.elements` but can also explicitly release by sending `client.keys('NULL')` ) – Sid May 07 '15 at 15:44
  • For newer versions of wdio, I know of v6, `browser.keys` is not designed to modify clicks. In this case, you have to use `performActions` and read into the Webdriver Actions API. – Reijo May 05 '20 at 08:15

1 Answers1

4

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.
});
Sid
  • 2,433
  • 15
  • 22
  • 1
    Thanks! This solved the problem. For me it worked to release the shift key by calling `keys('Shift')` again. – Sandro May 07 '15 at 18:43
  • @Sandro No problem! Just curious though - does calling `keys('NULL')` release it for you too or is it only if you call `keys('Shift')`? – Sid May 07 '15 at 18:48
  • I tried it and `keys('NULL')` releases the key as well. Can you explain why that is the case or is there an explaination somewhere? – Sandro May 07 '15 at 20:02
  • Also `keys()` is basically called on `client`. This is why I assumed it is in the scope of the `client` object. Why is `keys()` actually in the scope of `elements()`? Do you have any further reading handy that you can recommend? – Sandro May 07 '15 at 20:07
  • 1
    @Sandro `keys('NULL')` releases all keys. Unfortunately its not in the documentation but if you go to [`unicodeChars.js`](https://github.com/webdriverio/webdriverio/blob/master/lib/utils/unicodeChars.js) you will see its one of the options you can pass in and it changes the modifier key to be the unicode characters for null. As for the scope, I may be wrong about that, I did something similar before but haven't tested this exact code. Can you test if it releases for you after you are outside `client.elements`? – Sid May 07 '15 at 20:26
  • Thanks for the info! I tested it and for me it didn't release the shift key. – Sandro May 07 '15 at 20:31