Cypress img elements attribute checking - javascript

I need to check if all images on my page have the Alt attribute. I thought doing the following would do that but it doesn't check things correctly and just gives me an everything is good when I know it's not.
cy.get('img').should('have.attr',
'alt' );
Is there an easy solution other than many go through the page and build a selector for every image?

To check each element, you can use .each:
cy.get('img').each($el => {
cy.wrap($el).should('have.attr', 'alt')
}

Related

Trigger .click() on a link on mobile view only

So I'm currently working on a WordPress website with a Table of Contents plugin. All the plugin do is just detect headings and add them to its contents.
What I am trying to achieve on my current website (https://staging.vladesplana.com/planning-center-vlad-test) is that when the Window is at <= 768px, it should simulate a "click" event on the [ Collapse ] anchor link so that the Contents will be hidden on mobile load and only be Expanded when on Desktop pixels (1280px, etc) load
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label').click();
}
}
window.onload = tocToggle2;
May I know your thoughts or the proper code for this? I mainly just build websites on Elementor and know only basic Javascript.
Tried a few things as well from my searches and on Stack to no avail.
I use Custom CSS & JS plugin to insert CSS and JS codes into my WordPress website so please, no JQueries
EDIT: Corrected some of the codes.
Oh I think I got it.
I just added [0] on this line:
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
Source:
https://www.geeksforgeeks.org/click-method-not-working-and-console-returns-an-error-message-in-javascript/#:~:text=click%20is%20not%20a%20function,you%20have%20written%20a%20document.
Since it says there:
If you spelled it correctly then probably this error arises because you are not aware that document.getElementsByClassName returns an array of elements, not a single element. In order to avoid the error, you need to access a single element and then perform a click().
I checked in the console as well to check if the function is working as intended but it throws an error there.
final code:
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
}
}
Instead of using getElementsByClassName, which will give you a list with every matching element, use querySelector, which will return the first one it finds.
The reason your code isn’t working is because you can’t trigger a click on a list of nodes.

Selecting an HTML element by it's ID attribute with jQuery

I picked up some code on CodePen to help me dynamically replace the content of divs. It works, but as often happens when borrowing someone's code, I can't actually mold it to what I want it to do.
The original code provides pictures of animals, and when you click it, it sends the text of the name of the animal to a div. The Javascript looks like this:
$('#kittens').click(function() {
$('div').html('Kittens');
});
$('#aardvark').click(function() {
$('div').html('Aardvark');
});
I'm applying it to a more complicated webpage, so I really can't have it just replace the first level div with the word "Kittens."
I've found that by keeping the single quotes, I can put any text or code I want in there and it works just fine, but only if I'm writing to the first level div.
So I figure to target it, I should just give it the div ID. Something like:
$('#kittens').click(function() {
$('myDivName').html('Kittens');
});
This does nothing. I've also tried 'id=myDivName' , 'id="myDivName"' , id: myDivName , and a few others I can't recall right now. Nothing I can come up with seems to work.
Does anybody know how this parameter works and how I can get it to target just the div I want?
jQuery selectors work just like CSS selectors, so instead of $('myDivName'), do $('#myDivName')
when referencing an element in jquery, you need to use it's css selector. For an element with an id "myDivName" that selector would be #myDivName so your jquery would look like:
$('#kittens').click(function() {
$('#myDivName').html('Kittens');
});

Removing data attributes from HTML using jQuery

Can't seem to get this one to work...
I have a page that hides certain links. When the DOM is loaded, I'm using jQuery to toggle some of those elements. This is driven by using a data attribute like so:
<div class="d_btn" data-usr='48'>
<div class="hidden_button">
Then, I have the code:
$.each($(".d_btn"), function() {
var btn = $(this).data('usr');
if ( btn == '48' ){
$(this).children('.hidden_button').toggle();
}
The above all works as planned. The problem is that I am trying to remove the data-usr from the class .d_btn once the if statement is evaluated. I've tried the following and nothing works (i.e., after the page is loaded, the source still shows the data-usr attribute:
$(this).removeAttr("data-usr");
$(this).removeData("usr");
I've been working on this for a couple of hours now and...nothing! Help is greatly appreciated!
UPDATE
I've tried the great suggestions of setting the data attribute to an empty string but I'm still not getting the desired result.
To explain a little further, The reason I'm trying to remove the attribute is so when an ajax response adds another item to the page, the previously added items would already have the button either shown or hidden. Upon AJAX response, I'm calling the same function once the DOM is loaded.
Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...
I'm also fully willing to try alternatives to my approach. Thanks!
UPDATE
Well, the light bulb just flashed and I am able to do what I want to do by just using .show() instead of .toggle()
Anyway, I'd still like to find an answer to this question because the page will be potentially checking hundreds of items whenever something is added - this seems horribly inefficient (even for a computer, hahaha.)
Why don't you set the value to a random value or empty variable instead if removeAttr does not work..
$(this).attr("data-usr" , '');
$(this).prop("data-usr" , '');
Changing the DOM doesn't affect the source. It affects the DOM, which you can view with the Inspector/Developer Tools. Right click => View Source will give you the original source of the page, not the actual current source as modified by JavaScript.
Set it to a blank string:
$(this).attr("data-usr", "");
I second what Kolink said: check the DOM, not the source. (Chrome: Ctrl + Shift + i).
As others have stated. Checking the source will only show the original unedited source for the webpage. What you need to do is check the DOM using developer tools.
I've just checked everything in Chrome's inspector on jsfiddle here and the attribute is definitely being removed as well as the data.

:not and :first in jquery

I am having a jQuery Script to find out the resolution of browser and then change its css.
if ((screen.width>=1024) && (screen.height>=768))
{
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else
{
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
can you please help me knowing its actual functioning?
what does :not(:first) mean ? Please explain.
Thanks.
actually it means you select every link element with the attribute rel matching the word stylesheet but exclude the first of the found results :)
so if you have three elements in a container and try to select them using :not(:first) you will receive the second and the third one but exclude the first (!) one
not sure if it that is what you want... but if you have more then one link attribute in header and all except the first are set to that href you might (!) end up having the CSS requested / checked against server / cache several times
Media queries (thirtydot's comment) is also a good idea (comment +1)
Try using the an interactive console, such as the one in Chrome's inspector or Firebug in Firefox. Just type in $("link[rel=stylesheet]:not(:first)") and see if any elements are matched.
Edit: Thirtydot's comment about using media queries is a good one as well, and if you are going to have multiple stylesheet's this article may have some useful info.

Changing an image via Javascript?

Quick question regarding Javascript. I'm working on a Safari Extension for paring down the Google Search page, and I'd like to change the Google logo to a custom image. My plan is to have an injected .js script to put in the extension.
So far, I've tried this:
document.getElementById('img#hplogo').innerHTML =
"<img alt="Google" height="95" id="hplogo" src="logo3w.png" width="275"
style="padding-top:136px" onload="window.lol&&lol()">"
For some clarification, the logo image is under the ID on the Google homepage as "hplogo" or according to Safari Web Inspector, "img#hplogo". I want to replace the src, obviously, with my own logo3w.png that will be located in the root of the extension folder (thus, AFAIK, no advanced directory is needed).
If I could be pointed in the right direction command-wise, that'd be really helpful, but really any and all help is appreciated. Thanks!
You want to do:
document.getElementById("hplogo").src = "logo3w.png";
Note that the "img#hplogo" is not saying that the id of the img element is "img#hplogo", it is saying that you are looking at an "img" element whose id is "hplogo". So when using document.getElementById() you only need to pass "hplogo". In CSS you might say:
img #hplogo {
display: none; //or whatever
}
#hplogo {
display: none; //or whatever
}
And similarly with something like jQuery that supports CSS-style element selectors you might say:
var image = $("#hpLogo");
var theSameImage = $("img #hplogo");
But for document.getElementById() all you need to pass (and all you can pass) is "hplogo".
You may want to change the src attribute of the image:
document.getElementById('img#hplogo').src = 'path/to/your/image.jpg'
Changing the "innerHTML" property changes the inner HTML, not the element itself. The thing you want to do is find the element and change it's "src" property.

Categories

Resources