1

I have a div (using React component), something like this:

    <div className="drag-tab" onMouseDown={this.handleMouseDown}>
      <span className="drag-icon"></span>
    </div>

handleMouseDown looks like this: 

  handleMouseDown(e) {
    console.log('The mouse down event');
  }

I want to write acceptance test for this using selenium webdriver. Important part from my code looks like this:

  async function dragWidget() {
    const elem = driver.findElement(By.css('.drag-tab'));
    //await driver.sleep(1000);
    return driver
      .actions()
      .mouseDown(elem)
      // some other stuff for dragging here
      .perform()

  }

When I uncomment await driver.sleep(1000); it goes into handler and logs "The mouse down event". But without sleep it does not go there. It seems that it needs some time for setting the onMouseDown listener. I have tried everything to wait until it is ready to be "mouse downed", but without any success. Thing I tried are to wait for elementIsEnabled, elementLocated, elementIsVisible but they didn't work. I don't want to use sleep though. Note that similar thing happens if I change mouse down event with onClick. But I need the solution for the mouse down.

Thank you

UPDATE

The issue is that the div has the styles which make the element out of bound of his parent div i.e it's like that: 

<div className="parent-div">
  <div className="drag-tab" onMouseDown={this.handleMouseDown}>
    <span className="drag-icon"></span>
  </div>
</div>

The styles:

.drag-tab {
  position: absolute;
  display: inline;
  width: 40px;
  height: 48px;
  top: 150px;
  left: -40px;
}

The problem is -40px part which makes the div `40px left to the parent div. Weird thing is that if I change -40px to -20px the test works, -21px doesn't. (the break point seems the half of the width).

Kote
  • 683
  • 1
  • 9
  • 27
  • The issue seems similar to https://stackoverflow.com/questions/16057031/webdriver-how-to-wait-until-the-element-is-clickable-in-webdriver-c-sharp but I'm using javascript instead of c# and also `isEnabled` and `isDisplayed` didn't work for me – Kote Jul 27 '17 at 14:14
  • Either wait for an element created by the React library (an element that is created after the listener is assigned) or wait for the `onMouseDown` property to be different from the static HTML. The recommended approach is to try to reproduce as close as possible the behavior of a user which is to wait for a rendered clue that tells you the page is ready to be interacted with. – Florent B. Jul 27 '17 at 14:50

0 Answers0