Is it possible to use Cypress to find and delete an element from the HTML? And how to do it?
Edit: This works:
cy.get(selector).then((elem) => {
const elemHtml = elem.get(0)
elemHtml.remove()
})
Variation on #krema's answer:
cy.get(selector).invoke('remove');
get() yields the DOM element(s) it found which can then be removed.
cy.get(selector).then($el => $el.remove());
You can use embedded jquery in cypress:
Cypress.$(yourElementSelector).remove();
Related
I have a requirement where an element with a particular class has to be prepended to its sibling with another class. Although I am able to achieve this for the first instance, it doesn't work for all the elements in the div. I have tried the below code
Click Here
This Works:
$("#MyDiv .spanToBeShifted:first").prependTo($("#MyDiv .MyButton:first"));
This Doesnt:
$("#MyDiv .spanToBeShifted").prependTo($(this).closest('.MyButton'))
Below is the solution which worked for me
Solution
$('.spanToBeShifted').each(function () {
var d = $(this).siblings('.MyButton');
$(this).prependTo(d)
});
I am trying to update UI automatically, avoiding jQuery. I just want to update a css of a button after a click happened.
Should it be done in html with inline javascript code or typescript component?
Right now I am evaluating the latter, handling CSS in typescript as follows.
The component which changes its alreadyLiked property:
sendLike(recipientId: number) {
this.userService.sendLike(fromUserId, this.user.id).subscribe(data => {
this.alertifyService.success('You have liked ' + this.user.name);
// any way to update UI without this trash?
const btnLikeMe = <HTMLInputElement> document.getElementById('btnLikeMe');
btnLikeMe.classList.remove('btn-primary');
btnLikeMe.classList.add('btn-success');
btnLikeMe.classList.add('active');
btnLikeMe.disabled = true;
}, error => {
this.alertifyService.error(error);
});
}
After alreadyLiked is changed, I would like to update btnLikeMe css automatically in HTML:
<button id="btnLikeMe" class="btn" (click)="sendLike(user.id)"
[disabled]="alreadyLiked"
[ngClass]="alreadyLiked ? 'btn-success active' : 'btn-primary'"
title="{{alreadyLiked?'You already liked me. Thank you' : 'Like me now!'}}">
Like
</button>
It is working but it seems to be a bad approach.
I am using "#angular/core": "^5.2.0"
You don`t need JQuery for this. NgClass is the right way.
NgClass adds and removes CSS classes on an HTML element.
In some point if you want do to more complex things you can call functions...[ngClass]="getClass()"
Then you can debugging, but you can`t do this in HTML.
When you have to touch the DOM, you should use Renderer2.
Protractor has the nifty isEnabled() function for elements. Though it works great for <button>, it isn't doing the trick for <a> elements.
I can easily check the disabled or ng-disabled attribute, but is there a cleaner way?
You need to get the attribute directly like this:
expect(myelement.getAttribute('disabled')).toBeTruthy();
I use this in my Protractor testing daily without issue.
Even though MBielski's answer would work, a bit cleaner than using getAttribute(), would be to use isEnabled():
expect(myelement.isEnabled()).toBe(false);
if (dcoument.getElementById("a").disabled) {
//disabled
} else {
//active
}
You simple can you use jQuery to determine whenever the attribute is enabled or disabled on a link
$(function() {
$('input[type="button"]').on('click',function(){
if($('a').prop('disabled')){ // checks whenever the element has the given atribute
alert('it is enabled');
} else {
alert('it is not enabled');
}
});
http://jsfiddle.net/ukLsxna2/1/
This code from Dart worries me:
bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
void _ensureTemplate() {
if (!isTemplate) {
throw new UnsupportedError('$this is not a template.');
}
...
Does this mean that the only way I can modify my document is to make it html5?
What if I want to modify an html4 document and set innerHtml in a div, how do I achieve this?
I am assuming you are asking about the code in dart:html Element?
The method you are referring to is only called by the library itself, and only in methods where isTemplate has to be true, for example this one. If you follow this link, you can also read what other fields/methods work like this.
innerHtml is a field in every subclass of Element which supports it, for example DivElement
Example:
DivElement myDiv1 = new DivElement();
myDiv1.innerHtml = "<p>I am a DIV!</p>";
query("#some_div_id").innerHtml = "<p>Hey, me too!</p>";
I have 5 a elements that I need to inject with additional span , instead of creating new Element 5 times how can I do this only once ? I tried
var holders= $$('.holders');
holders.each(function (el){
var addspan = new Element('span', {
'class': 'over'
});
el.inject(addspan , 'top');
});
but it does not work
any help is appreciated , thank you!
Injection works the other way around; it injects an element into another one. Try reversing addspan and el.
Another option would be to use the adopt function, which might be more intuitively meant to have an element adopt another one.
Like akaIDIOT already mentioned, you have to swap addspan and el when using the inject method. To save a line of code, you can chain the inject method with the new element like this:
var holders= $$('.holders');
holders.each(function(el) {
var addspan = new Element('span', {
'class': 'over'
}).inject(el, 'top');
});