I am trying to keep my pageObjects in Protractor as clean as possible, but have run up against some behavior in selecting sub-elements.
This works:
var parent = element(by.css('.parent-class'));
parent.element(by.css('.child-class')).getText();
However this does not:
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.child.getText();
Is there someway to do something like the second example? I'd rather not have the element locators spread throughout the methods on my pageObjects, but it seems thats the only way to locate subelements?
In actual application I have a long list of cards, from which I filter down to just the one I am looking for. I then want to do things with subelements of the card.
You could use the locator() function to get the locator of the child element and use it to find a child of the parent. This is similar to the solution you provided in your comment, but allows you to define all properties on your page object as web elements instead of a mix of elements and locators:
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.element(child.locator()).getText();
I have a lot of the following code:
var parent = element(by.css('.parent-class'));
var child = parent.element(by.css('.child-class'));
child.getText();
But as far as I understood you have a lot of children and you don't want to list all the variants.
Additionally to Nathan Thompson answer you can have a helper function in page object to find subelement:
function getCard(parent, child) { // Or getChild()
return element(by.css(parent)).element(by.css(child));
}
function getCardText(parent, child) { // Or getChildText
return getCard(parent, child).getText();
}
So then you can just write in spec:
expect(cardPage.getCardText('.parent-class', '.child-class')).toBe('...');
I wanted to mention that using 5.2.2 version this implementation is bit different.
To get actual selector value you must use following code
let selector = child.locator().value
This is because locator returns an object which contains selector and other properties, but in this case, you only need selector.
here is what is returned by method locator()
name(name) {
return By.css('*[name="' + escapeCss(name) + '"]');
}
{ using: 'css selector', value: '.child-class' }
Here is how it should be implemented now.
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.element(child.locator().value).getText();
//short hand
var parent = $('.parent-class');
var child = $('.child-class')
parent.$(child.locator().value).getText();
Related
I want to select all elements that do not have the class "myclass". How can I do that in Cytoscape.js?
According to http://js.cytoscape.org/#selectors/data, "[^name] Matches elements if the specified data attribute is not defined", however a class is not a data attribute and ^.myclass does not work, neither does :not(.myclass).
The error is The selector :not(.myclass) is invalid.
Is there a way to negate classes?
If you want to get the negative class selector, you can do this:
cy.elements().not(cy.$('.yourClass'));
// in more detail
var allElements = cy.elements(); // get all elements
var negators = cy.$('.yourClass'); // get all elements with the class to negate
var result = allElements.not(negators); // gets the difference between the two collections
If you really want to achieve this by using selectors only, then you might add a data field to each element which has myclass (this can be done while adding the class), and then use [^myclass]
I am trying to keep my pageObjects in Protractor as clean as possible, but have run up against some behavior in selecting sub-elements.
This works:
var parent = element(by.css('.parent-class'));
parent.element(by.css('.child-class')).getText();
However this does not:
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.child.getText();
Is there someway to do something like the second example? I'd rather not have the element locators spread throughout the methods on my pageObjects, but it seems thats the only way to locate subelements?
In actual application I have a long list of cards, from which I filter down to just the one I am looking for. I then want to do things with subelements of the card.
You could use the locator() function to get the locator of the child element and use it to find a child of the parent. This is similar to the solution you provided in your comment, but allows you to define all properties on your page object as web elements instead of a mix of elements and locators:
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.element(child.locator()).getText();
I have a lot of the following code:
var parent = element(by.css('.parent-class'));
var child = parent.element(by.css('.child-class'));
child.getText();
But as far as I understood you have a lot of children and you don't want to list all the variants.
Additionally to Nathan Thompson answer you can have a helper function in page object to find subelement:
function getCard(parent, child) { // Or getChild()
return element(by.css(parent)).element(by.css(child));
}
function getCardText(parent, child) { // Or getChildText
return getCard(parent, child).getText();
}
So then you can just write in spec:
expect(cardPage.getCardText('.parent-class', '.child-class')).toBe('...');
I wanted to mention that using 5.2.2 version this implementation is bit different.
To get actual selector value you must use following code
let selector = child.locator().value
This is because locator returns an object which contains selector and other properties, but in this case, you only need selector.
here is what is returned by method locator()
name(name) {
return By.css('*[name="' + escapeCss(name) + '"]');
}
{ using: 'css selector', value: '.child-class' }
Here is how it should be implemented now.
var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.element(child.locator().value).getText();
//short hand
var parent = $('.parent-class');
var child = $('.child-class')
parent.$(child.locator().value).getText();
Given I have the elmFinder variable:
var elmFinder = element(by.css('.thing'));
What if i need to get back the webdriver.Locator, a.k.a locator strategy? i.e.
elmFinder.??? //=> by.css('.thing')
I'm looking after the function ??? if it exists.
UPDATE:
This feature has been merged and we can now do:
elmFinder.locator();
UPDATE:
This feature has been merged and we can now do:
elmFinder.locator();
Old answer:
You cannot. The element finder does not keep a reference to the locator:
https://github.com/angular/protractor/blob/master/lib/protractor.js#L103
What I typically do is store the selector in it's own var, and then place that string into the selector, so I can use both interchangably:
var cssThingSelector = '.thing';
var elem = $(cssThingSelector);
Something like that.
Edit:
I will also add that you can nest findElement calls from selenium webelement objects.
So, if there is another item in the inner html of the .thing web element (say, a span tag), you could just nest another findElement call:
var spanElem = elem.$('span');
You can do this as much as you'd like.
What would be the most efficient way to find all ExtJS components that are rendered as descendants of a given HTML Element? Note that this Element is not part of a component itself and is not managed by Ext in any way, it is just hardcoded raw HTML. And this Element may not only contain just ext components, it may have other non-ext managed html in it as well, and that html can also contain ext components. So that means that the solution must traverse all the way down the DOM, not just look at direct children.
My suggestion would be to walk the dom, checking the id of each element against Ext.getCmp, which is a hash-map lookup. You could then switch to walking through the Component methods, but I think it would be basically the same speed, and if you're already walking the dom to begin with you might as well keep at it:
var dom = ...;
var components = [];
Ext.Array.each(Ext.get(dom).query('*'), function(dom) {
var cmp = Ext.getCmp(dom.id);
if (cmp)
components.push(cmp);
});
Ext.get(dom).query('*') may do more work than you'd like, it might be more efficient to have your own walker, like this:
function walk(dom, callback) {
if (dom.nodeType === 1) {
callback(dom);
Ext.Array.each(dom.childNodes, function(child) {
walk(child, callback);
});
}
}
var dom = ...;
var components = [];
walk(dom, function(dom) {
var cmp = Ext.getCmp(dom.id);
if (cmp)
components.push(cmp);
});
All this assumes that the dom ids match the component ids, which I don't know if that is something you can rely on in future versions of Ext.
I have 2 main questions.
Does extending things like Object count?
What is DOM wrapping?
http://perfectionkills.com/whats-wrong-with-extending-the-dom/
After reading that article I couldn't find anything about DOM wrapping, and no specification and what exactly is and isn't DOM extension.
No, Object is specified as part of the Javascript language, while the DOM is an API only relevant in a browser environment and is used to "access and update the content, structure and style of documents" (W3C).
However, one of the reasons provided in that article arguing against the extension of DOM objects still applies to extending native types such as Object - namely the chance of collisions.
Wrapping an object refers to creating a new object that references the original, but providing additional functionality through the new, wrapper object.
For example, rather than extending a DOM Element object with a cross-browser addClass function like this:
var element = document.getElementById('someId');
element.addClass = function (className) {
...
};
You can instead define a wrapper function:
var ElementWrapper = function (element) {
this.element = element;
};
And add the function to its prototype:
ElementWrapper.prototype.addClass = function (className) {
...
};
And "wrap" elements like this:
var element = document.getElementById('someId');
var wrapped = new ElementWrapper(element);
wrapped.addClass('someClass');