am trying to match the following in a custom lint rule:
expect(element.getAttribute('checked')).toBe(true);
i'm attempting to use the following syntax in the selector:
"CallExpresssion[callee.object.arguments[0].callee.property.name='getAttribute']"(node) {
console.log(node);
},
but this doesn't work because of the arguments[0]. so i'm wondering if there's any way to do this query on an argument.
It is possible to access items in an array. The syntax is not really what you'd expect though. Instead of the normal bracket notation, you'd access it as a property: arguments.0
This is what your query could look like:
"CallExpresssion[callee.object.arguments.0.callee.property.name='getAttribute'](node) {
console.log(node);
}
Related
I'm currently writing some Protractor tests for an app. But in the app i'm using controller as syntax as the pieces I want to work on are components. The problem is that when i use the selector of "" $ctrl.functionName"" it's giving me an illegal selector statement.
Anyone have any ideas about this?
let btn = $$("button[ng-click^=$ctrl.initRequest].secondary.bf-btn");
expect(btn.isDisplayed()).toBe(true);
The error message is
Failed: invalid selector: An invalid or illegal selector was specified
If you cannot assign a meaningful id or other attribute to the element, you need to fix your current selector. At the very least, there should be quotes around the ng-click value:
button[ng-click^='$ctrl.initRequest'].secondary.bf-btn
Note that a slightly better version, that would also not require quotes, would be to use a partial match:
button[ng-click*=initRequest].secondary.bf-btn
And, see if you can drop the questionable classes and have just:
button[ng-click*=initRequest]
I'm using casperJS to capture a portion of the screen using casptureSelector method with the code below:
this.waitForSelector(config.selector, function () {
this.then(function() {
this.captureSelector(config.imageFileName, config.selector);
});
});
it is possible to pass #someId for an an id selector and .someClass for a class selector.
But how can I pass multiple classes selector like .someClass.otherClass ?
I tried many variations but I'm unable to make it work.
I believe you can you any valid css selector so for multiple classes select you just separate the string with a comma:
'.firstSelector, .secondSelector'
You can't path an array but you can dynamically build with Array.join a string of comma separated classes
EDIT
I believe this would work only if the selection results in a single DOM element . If you drill into the code, the selector is used to find the capture bounds and adjust zoom., an inner method for calculating the bounds calls findOne with the selector, so I guess (without really digging into findOne method that it would return the first element if a query results in multiple DOM elements.
So I will do something like this often
save(...keys: string[]) {
keys.foreach(x => // save);
}
I can call this any of these ways because of the spread operator.
save('string1', 'string2');
save(['string1', 'string2']);
save('string');
I love this behavior but what I have a case where I have an #input on a component that I want to behave the same way. sometimes I want to just give it one item, other times I want to give it an array. How could this syntax be applied?
I want to be able to do something like this.
#Input() ...myClass: ClassBase[] = [];
And usages like this.
// ts
currentClass = new ClassBase();
conflictingClasses = [new ClassBase(), new ClassBase()];
// html
<my-component [myClass]="currentClass"></my-component>
<my-component [myClass]="conflictingClasses"></my-component>
How can I get this kind of behavior? We already use this component in several places but we only give it one item, I would like to not have to mass refactor to change this component to take an array of items.
thanks!
I can call this any of these ways because of the spread operator.
No, the premise of your question is wrong. You must call it with n number of string arguments. A string array string[] is not the same thing. This is shown below:
function save(...keys: string[]) {
keys.forEach(x => /** save */);
}
save('string1', 'string2'); // OKAY
save('string'); // OKAY
save(['string1', 'string2']); // ERROR !
Please as a different question instead of editing this as it will probably not get much attention after edits 🌹. PS: have fun and stay happy!
I have a custom Angular service which creates a custom DOM node using angular.element(). Meanwhile, since I also want the element to have a set of predefined attributes, I pass a JS object as a second parameter to the function:
var element = angular.element('<node-name />', {
class: "some css class",
onclick: "someClickHandler()"
});
Although this works OK as far as the attribute is not specific to Angular.
The problem is that I'm not able to produce Angular-like dashed-case (don't know what their actual name is) attributes (e.g. ng-click).
For now, if I do:
var element = angular.element('<node-name />', {ngClick: 'someClickHandler'}); // ng-click here is definitely not possible as it leads to a syntax error
it will always result in the DOM node as:
<node-name ngclick="someClickHandler"></node-name>
which doesn't work the Angular way.
So, is there any way that a camel-case attribute be converted to its equivalent dashed-case in the DOM?
Any help would be appreciated.
You don't really need any additional code to convert from camelCase to snake-case (although you could). It's better to use snake-case in the first place if you really want to, just make sure you put property name in quotes, otherwise the name is not valid identifier:
var element = angular.element('<node-name />', {
'ng-click': 'someClickHandler'
});
Trying to check the value of this element on an angular plunker:
it('should display valid',function(){
browser.get('http://embed.plnkr.co/3nt01z/preview');
var errortext =element(By.xpath('body>div>h2>span:nth-child2)')).getText);
expect(errortext).toBe('Not:(');
})
Getting an error though:
Stacktrace:
InvalidSelectorError: invalid selector: Unable to locate an element with the xpath expression body>div>h2>span:nth-child(2) because of the following error:
SyntaxError: Failed to execute 'evaluate' on 'Document': The string 'body>div>h2>span:nth-child(2)' is not a valid XPath expression.
Is there a better way to find this span element or what is the right xpath expression?
I think you meant By.cssSelector(...).
By.xpath expects an XPath expression, which would be something like /body/div/h2/span[2], although I'm not sure about the exact syntax.
By the way, your code would be easier to test if you added an ID or CSS class to the element, so you don't need to depend on the exact DOM structure.
Try to use element(by.css('some css selector'))
Also, you have a typo in code - getText; instead of getText();
Or try this:
var errortext = element(By.xpath('/body/div/h2/span[2]')).getText();