Okay, I have an angular app in which there are directives and some other normal html element. This directive is interesting, as it uses RaphaelJs to create custom graphics. This directive also uses require js to load dependecies( like raphel.js). Every thing works fine :)
Now the hard part. I want to write some E2E test cases. I want to select the svg elements that are created by directive and check some attributes values.
So in the browser(Chrome) console, I type $('tspan'), I see a host of tspans elements being returned by the simple css selector.
sample tspan
<tspan dy="7" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Somevalue</tspan>
When I write the same query in E2E sheets
var svgElement = $('tspan')[0];
console.log(svgElement);
It logs following :
{ click: [Function],
sendKeys: [Function],
getTagName: [Function],
getCssValue: [Function],
getAttribute: [Function],
getText: [Function],
getSize: [Function],
getLocation: [Function],
isEnabled: [Function],
isSelected: [Function],
submit: [Function],
clear: [Function],
isDisplayed: [Function],
getOuterHtml: [Function],
getInnerHtml: [Function],
findElements: [Function],
isElementPresent: [Function],
evaluate: [Function],
'$$': [Function],
findElement: [Function],
'$': [Function],
find: [Function],
isPresent: [Function] }
When I try to access the getText method on the same element, I get the
var svgElement = $('tspan');
console.log(svgElement.getText());
C:\Users\abc\AppData\Roaming\npm\node_modules\protractor\node_modules\seleniu
m-webdriver\lib\webdriver\promise.js:1549
throw error;
^
Error while waiting for Protractor to sync with the page: {}
Can not understand the root cause. Can anybody help ?