I'm new to this website and just begun my journey in HTML. My hope is that I can provide to the community as much as I have received lurking in the answers!
I am currently working on automating some navigation on IE using VBA. All has gone to plan with the exception of the following:
There's a "button" I am trying to click...here is the HTML:
<a class="alignLeft nowrap" href="/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0">Download</a>
In the past, I have simply used the href to navigate directly to the page. However this particular request returns an error page in the browser so that doesn't seem to be an option.
Any help would be appreciated!
What link are you trying to access? Is it a folder included in your project, or the one from an external server?
From what I understand, you're trying to access the "assistant" folder is this?
The "/" before "assistant" (/ assistant) can affect the location because it indicates the entry in another folder.
Try if the folder is in the project, without a previous "/":
"assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0"
Have you also tried a CSS selector of a[href='/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0']
Which would be
.document.querySelector("a[href='/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0']").Click
If those fail try:
.document.querySelector(".alignLeft.nowrap").Click or
or
.document.querySelector("a.alignLeft.nowrap")
.querySelector is the method of document that applies a CSS selector. You select an element by its styling.
a.alignLeft.nowrap, for example, is a tags with className of alignLeft nowrap. The "." means className. You are not allowed compound names when using .querySelector so you add another dot where the space is to get a.alignLeft.nowrap.
.querySelector returns a single matching item i.e. the first. .querySelectorAll will return a nodeList of all matching elements which you then traverse the .Length of to get to individual items by index.
Related
A different DOM element
I was checking source code of youtube and found I couldn't query these elements from DOM. what are these ?
I was expecting the element to be queryable using javascript.
Update I found the answerit is a web component and can be queried as a shadow root. What problem does web component solve ?
source - https://kevinsimper.medium.com/document-queryselector-with-web-components-76a8be5bc59
These are custom tags that you wouldn't find in most code bases.
However, fret not. You can still query this elements with the following selector:
let thumbnailArray = document.querySelectorAll("#dismissible > ytd-thumbnail");
If you want to query an element, but can't figure out a selector that returns something, you can always right click on the element and mouse over the copy option, then "copy selector".
Here is the list of thumbnails returned into the array:
This is the react element of youtube. That's why we cannot query it from anywhere. We can create own element in react. These are one of those.
***** THANKS *****
As the title suggest, I've encountered this tag today. Searched for it, however couldn't find anything informative. It is something like this
<a href="activities.html" tppabs="http://www.dreamguys.co.in/hrms/activities.html">
What is the meaning of "tppabs" attribute?
From:
http://www.tenmax.com/teleport/support.htm
Q: I notice that the HTML pages Teleport creates will have "tppabs" tags in them. What are these and can I remove them?
A: The tppabs tags are created and used by Teleport as part of its Link Localization system. You can prevent the tags from being inserted by turning OFF Link Localization on the Project Properties, Browsing/Mirroring page; but then the links between files may not work correctly in the offline copy.
This is not a default attribute and will more than likely be a custom created attribute, you will need to look at your code to find out more.
Elements (like div and a) have starting and ending tags, and starting tags can contain attributes.
As for the status of tppabs, it has never existed. It's inserted into markup by Teleport Pro and contains the absolute form of a URL. This allows the software to locate a resource once the document has been downloaded. It serves no purpose as far as HTML is concerned.
When a user scrolls down on a webpage I have, a class gets added to the nav tag and it changes positions on the page. When the user scrolls back to the top, the class is removed and it moves back to the original position. I know this feature works and the class when I inspect the element in a browser. I'm trying to write an Rspec test to test this feature. I've been trying to use Capybara without success. The scrolling part of the test works but searching the HTML and CSS for the added class isn't.
The nav id is "views" and the class being added is "on_nav". This is the test so far:
scenario 'Scroll down' do
visit '/'
page.execute_script "window.scrollBy(0,1000)"
expect(page.html).to include('class="on_nav"')
end
The error message is that it cannot find 'class=on_nav"' on the page, even though when I inspect the element in the browser I can see it. These are a few of the different random commands I've tried, from answers I've looked at online when trying to Google this, that all give me the same error or they say my syntax is wrong and I can't find how to fix it:
expect(page.html).to have_selector("#on_nav")
expect(page).to have_css("nav#views.on_nav")
expect(page.has_css?(".on_nav")).to eq(true)
I am completely new to writing web tests, but I do know the answers I have found online (for example this question about checking the CSS and this article about testing elements with Capybara) haven't worked for me. It might be giving me problems because I'm trying to test the nav tag whereas all the examples I've found online talk about either div or input? Is it even possible?
Doing expect(page.html).to include('class="on_nav"') should never be done, and you should ignore everything from any article/tutorial that suggested that. By getting the page source as a string you are completely disabling Capybaras ability to wait/retry for the given condition to be met.
With regards to your other attempts
By default the selector type is :css, so expect(page.html).to have_selector("#on_nav") would look for an element with an id of 'on_nav' which isn't what you want, and by calling page.html you've again disabled waiting/retrying behavior since the string gets parsed back into a static document.
expect(page.has_css?(".on_nav")).to eq(true) is getting closer to what you want but will not provide useful error messages since your expectation is just for true or false
expect(page).to have_css("nav#views.on_nav") is the correct way to verify an elements existence on the page. It will look for a visible <nav> element with an id of views and a class of on_nav and wait/retry up to Capybara.default_max_wait_time seconds for that element to exist. If that isn't working for you then either the element isn't visible on the page, the selector doesn't actually match the element, or your JS that's adding/removing the class isn't working when you call scrollBy. If you're using selenium, pause the driver after calling scrollBy and inspect the element in the browser to ensure it's adding/removing the class as expected, and if it is then add the actual HTML of the nav to your question.
Firebug shows : <a class="ng-binding" ng-click="goto(menu.MenuInfo.Href)">
FirePath shows : html/body/nav/div[1]/div[1]/ul/li[3]/a
It shows as above when I use Firebug or FirePath to find the web element;
Then I copy it to Selenium IDE Target text and click the find button , But it cannot find the web element.
How can I find the web element and make it run in Selenium IDE to record script?
Automatic XPath detectors are usually not a good choice when trying to figure out the Selenium locator for a specific web element. Especially expressions with numeric indexes (e.g. your li[3]) are likely to change if list/table items are removed, added or resorted.
The best way to locate an element is always by id, as this is always unique (unless you have invalid HTML). But your element doesn't have one, unfortunately.
For <a> elements, it's usually good to use the LinkText for locating the element, provided that a) it's unique and b) your site doesn't have a language toggle functionality, which usually changes all link texts.
Alternatively, you could use the tag name and class via CSS selector:
a.ng-binding
Still, it depends on the structure of your page whether this locator is unique or not. There are no general rules for finding the best locator, just good and bad strategies.
I have an control, to which I want to add a custom html attribute called, previousValue.
The Salesforce Developer's Guide assures me that I can do this by prefixing the attribute name with html-.
So I have an element that appears thus:. I also have the docType="html-5.0" attribute in my page control.
However, in Eclipse I get an 'unsupported attribute' error. I have upgraded to the latest force.com IDE; can any one tell me why this isn't working? What else do I need to do?
Thanks.
After much experimentation, the answer to this seems to be that the salesforce developer's guide is inaccurate and the 'hmtl-' prefix is not supported by the <apex:inputField> component. I can add it without a problem to an <apex:outputPanel> component. Don't understand why this should be so and the whole point to using these attributes is to locate data in a relevant place and avoid complex jquery selects to find the data relative to the location at which it is required.