How can i solve this "The name attribute is obsolete. Consider putting an id attribute on the nearest container instead." - w3c-validation

I have find the plugin for one page scroll and where i have to enter the attribute like to effect the scroll when clicking on the menu BUT the issue is W3C is showing error there.
First way this type of format which is required for the code -
<a name="aboutus"></a>
I have tried this way too -
<a name="http://www.domain.com/newcopy/responsive/index.html#aboutus"></a>
but not success. Please help.
Also one more error "Element img is missing required attribute src."
<img width="300" height="200" data-original="img/port9.jpg" alt="Portfolio 4" class="lazy imp-responsive">
I have added this code so the lazy load will works.

In HTML5 (CR):
The a element must not have a name attribute (however, its use is under some circumstances obsolete but conforming). Instead, use the global id attribute.
The img element must have the src attribute.

Related

XPath formula for an uncommon second URL attribute in <img> element

Having difficulty to get the correct XPath to scrape the real URL of any image of my Scoop.it topic. Here is the code excerpt centered on one image. Other images are treated the same way.
<div class="thisistherealimage" >
<img id="Here a specific image ID" width="467" height="412"
class="postDisplayedImage lazy"
src="/resources/img/white.gif"
data-original="https://img.scoop.it/jKj7v6ojzPtACT6EaeztHTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9"
alt="Here an alternative text" style="width:467; height: 412;" />
So, in this code sample, I dont want to scrape "/resources/img/white.gif" but the URL following the "data-original" attribute!
I'd like to capture the the data-original attribute, not only to capture it when it contains a URL.
As an XPath beginner, I've tried //div[contains(#class,'thisistherealimage')]/img[contains(#class,'postDisplayedImage')][contains(#class,'lazy')]!
But it's not specific to data-original attribute. Isn't it?
Any advice?
If you want the data-original, you can access like this:
//div[contains(#class,'thisistherealimage')]/img[contains(#class,'postDisplayedImage') and contains(#class,'lazy')]/#data-original

protractor using xpath //*[contains('text')] error element not visible

Hi I have this element from a dropdown menu I try to select:
<div class="tt-suggestion tt-selectable">
<strong class="tt-highlight">Auto Customer</strong>
</div>
If I use element(by.xpath("//strong[contains(text(),'Auto Customer')]")).click(); I can select it no problem. But if I use element(by.xpath("//*[contains(text(),'Auto Customer')]")).click(); I get "Failed: element not visible"
Can someone explain this to me please?
Thank you
Because the * in //*[contains(text(),'Auto Customer')] means any tag, not only the strong Tag. But //strong[contains(text(),'Auto Customer')] must be strong Tag.
//*[contains(text(),'Auto Customer')] should find more then one elements on page, and the first one is not visible. You can try this xpath in Chrome DevTool's Element Tab to see how many elements it can find and the first one is visible or not.

Thymeleaf parse text and execute in-text expressions

I have text string, that contains links, for example, like <a th:href="'someLink'">Download</a> .
I need to process that text and replace th:href="'someLink'" with correct links to show text with Download.
The text with links is stored in variable textThatContainsLinks.
My code to show text is <div th:utext="${textThatContainsLinks}">. I also tried to use preprocessing like <div th:utext="${__textThatContainsLinks__}">.
Currently this code shows links not as I expected, but non-preprocessed, ie, output is <a th:href="'someLink'">Download</a> now.
How to pre-process expressions in text, before showing it?
Thank you very much!
Take the context path and directly attach it to the relative path of a pure html5 attribute e.g LINK, <img src="/contextPath/relative/path/image.jpg" width="50" height="50" alt="logo"/>.
Notice how simple the accessibility to the resource is: /contextPath/relativePath, so the most important path there is the relative path. This is similar to Thymeleaf was unable to render <img> tag when sent from database table. I observed that once thymeleaf's namespace th: qualifies a href or src attribute that resides inside a text/String the absolute path is not properly resolved.

Aria-hidden does not work with buttons in Firefox and JAWS

<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>
JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option

watir-webdriver click on image

Folks,
I have an image with the following HTML code:
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: right;" id="ext-gen1453">
<img alt=""src="data:image/gif;base64,FRFRFR/GFFFFFFFFFF==" class="x-action-col-icon x-action-col-0 folder-action-add folder-action" data-qtip="Add New Music File" id="ext-gen1300">
When I click on the image it should open a pop up so that I can add new music file, I tried a few things but I am not able to click on that image. Any suggestions?
Thanks a lot
You can click on it by the class or a partial match of the class.
#browser.image(:class=>/folder-action-add folder-action/).click
Here is a list of the identifiers you can use for watir, I think it's mostly the same for watir-webdriver.
So far, you haven't got a consistent way of actually identifying the element. From what you've said in the comments, you've tried the 'text' attribute which doesn't exist, and the 'id' attribute which is auto generated and different every time.
You need to find a way of consistently identifying the element. It's usually preferable to use a semantic class on the element to make styling and testing easier and less brittle. You have a few classes declared, perhaps 'folder-action-add' expresses the intent of the button clearly? If not, you could add one such as 'add-music-file'.
Then you should be able to use watir to select an element by it's class, I'm not familiar with the syntax but at a guess, #browser.image(:class => 'add-music-file') might do the job.

Resources