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.
Related
When using PageObjects for Protractor e2e tests, should you use getter functions for the element locator variables instead of having variables?
example:
public loginButton: ElementFinder = $('#login-submit');
public loginUsername: ElementFinder = $('#login-username');
Or should you use a getter function in the Page Object like this:
public get loginButton(): ElementFinder {
return $('#login-submit');
}
public get loginUsername(): ElementFinder {
return $('#login-username');
}
Is one approach better than another?
No getters needed, since protractor ElementFinder and ElementArrayFinder objects are lazy - no any searching for this element will be done until you will try to call some methods on them. Actually thats also a reason why you don't need to use await for protractor element search methods:
const button = $('button') // no await needed, no getter needed
console.log('Element is not yet tried to be searched on the page')
await button.click() // now we are sending 2 commands one by one - find element and second - do a click on found element.
http://www.protractortest.org/#/api?view=ElementFinder
ElementFinder can be used to build a chain of locators that is used to find an element. An ElementFinder does not actually attempt to find the element until an action is called, which means they can be set up in helper files before the page is available.
It's fine to use either but if you're going to transform or do something else to your element, then the getter function would be better in my opinion since that's the reason why we utilize mutators in the first place.
I'm not really sure which method is more convenient, if there is one.
I've been using protractor for a bit longer than 1 year now, and I always stored locators in variables.
What I'd normally do is:
const button = element(by.buttonText('Button'));
Then I'd create a function for interacting with the element:
const EC = protractor.ExpectedConditions;
const clickElement = async (element) => {
await browser.wait(EC.elementToBeClickable(element));
await element.click();
};
Finally, use it:
await clickElement(button);
Of course I store the locators and functions in a page object, and invoking/calling them in the spec file. It's been working great so far.
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'm getting a response in JSON format, which contains an _id that is stored as an ObjectID in Mongodb on the server side. However, I change it into a String, and it still won't let me add it. Is it because it has numbers? I need the element to be identifiable by the id, so if I can't append this way, is there any other way I can reference the element by the id?
var group = d3.select("#containerthing");
var id = response._id.toString();
console.log(id);
//5802bc044f6313c1097de4a2
var responseNode = group.append(id).attr("fill","black").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
//InvalidCharacterError: String contains an invalid character
I believe that I understand your problem.
D3's .append():
If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element, or the next following sibling in the update selection if this is an enter selection. [...] This function should return an element to be appended. (The function typically creates a new element, but it may instead return an existing element.
Why .append() work fine if you pass 'foo'? Because D3 append a custom tag element. If you see in your console I'am sure that you will see <foo>...</foo>
Why .append() work wrong if you pass '5802bc044f6313c1097de4a2'? A custom tag element can't start with a number. You don't use _id, you should try to find another pattern for identify your element.
I hope that helps
The reason was that you can't start elements with numbers. I had to do:
var responseNode = group.append("n"+id).attr("fill","black").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
to get it to work.
Using Ember.CollectionView I want to access and manipulate the DOM element which is being inserted by each child view. The issue I have is that I don’t know how to get a reference to the element from within didInsertElement. Here is the jsFiddle -- the summery of coffeescript is below:
window.App = Ember.Application.create()
window.App.initialize()
App.Item = Em.View.extend
didInsertElement: () ->
console.log ">>> element is: ", this.element
App.items = Em.ArrayController.create()
App.items.set('content',[
Em.Object.create({title:"AN", id:"item-one"}),
Em.Object.create({title:"Epic", id:"item-two"}),
Em.Object.create({title:"View", id:"item-three"})
])
App.EpicView = Ember.CollectionView.extend
classNames: ['epic-view']
contentBinding: 'App.items'
itemViewClass: 'App.Item'
this.element is undefined. I have also tried calling element and that is undefined as well. According to the docs, there is an element property available inside the view, but I don’t know how to access it, and I am not sure if it is available from within didInsertElement or not.
How can I get the id of the DOM element that was just inserted into the view? Ideally, I would like not having to search for it in the DOM since the view should already be aware of what it is inserting into the DOM.
ps: I am using Ember 1.0pre
Use get('element') or get('elementId') to access properties in Ember
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');