Ember: Best practices with Selenium to make integration tests in browser

Question

Have you any experiences/examples to make Selenium tests with ember.js?

I cannot "grab" views (I use router), because they have not-deterministic ids.

Any ideas?

Answer 1

You can set your own id's for view elements explicitly. Directly from handlebars like:

{{#view Ember.TextField elementId="my_id"}}

Or from your view object:

MyApp.MyView = Ember.View.Extend({
  elemntId: "my_id"
});

Answer 2

EmberJS generates/assigns dynamic values for id attributes, example, ember32, ember33, ember34, etc. In these cases you won't be able to use the full value of the id attribute to locate/click the elements. As an example, consider the following element:

<input placeholder="" id="ember32" class="ssRegistrationField ssEmailTextboxField ember-text-field ember-view" type="email">

The value of the value of the id attribute will keep changing dynamically, everytime you access the AUT(Application Under Test). Hence to interact / click those elements, the solution is to construct dynamic Locator Strategies inducing WebDriverWait inconjunction with ExpectedConditions as visibilityOfElementLocated() as follows:

• cssSelector:

  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.ssRegistrationField.ssEmailTextboxField.ember-text-field.ember-view[id^='ember']"))).click();
  

• xpath:

  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[starts-with(@id, 'ember') and @class='ssRegistrationField ssEmailTextboxField ember-text-field ember-view']"))).click();