CODEWITHSUNDEEP
angularphantomjsprotractor
A. Duff
A. Duff

Reputation: 4309

Protractor/PhantomJS gives DOM Exception 12 when trying to select a label

I'm using Protractor with PhantomJS to test an Angular2 project. When run with Chrome, my tests pass fine, but with PhantomJS I get errors in tests that are trying to use a CSS selector to select a label like so:

element(by.css('label[for="my-id"'))

The error I get is:

Failed: {"errorMessage":"SyntaxError: DOM Exception 12","request":{"headers":{"Accept-Encoding":"gzip,deflate","Connection":"Keep-Alive","Content-Length":"74","Content-Type":"application/json; charset=utf-8","Host":"localhost:15995","User-Agent":"Apache-HttpClient/4.5.1 (Java/1.8.0_101)"},"httpVersion":"1.1","method":"POST","post":"{\"using\":\"css selector\",\"value\":\"label[for=\\\"my-id\\\"\"}","url":"/elements","urlParsed":{"anchor":"","query":"","file":"elements","directory":"/","path":"/elements","relative":"/elements","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/elements","queryKey":{},"chunks":["elements"]},"urlOriginal":"/session/3e10b5e0-d873-11e6-830b-4d293c6fcef6/elements"}}

Googling "DOM Exception 12", it seems to be related to how ID selectors are used, but I believe the way I'm using it is correct:

<label for="my-id">My Label</label>
<input id="my-id" type="text" ... />

Any thoughts?

Upvotes: 1

Views: 579

Answers (1)

alecxe
alecxe

Reputation: 473813

The CSS selector is actually invalid, there is a missing closing square bracket:

element(by.css('label[for="my-id"]'));
                             HERE^

Note that you can catch this kind of problems early if you would use ESLint with eslint-plugin-protractor plugin in your IDE of choice. E.g. in WebStorm it would warn you on-the-fly:

enter image description here

Upvotes: 3

Related Questions