I am attempting to use puppeteer to scrape the information pre-loaded into an input box. I believe that would mean it is the placeholder.
I cannot seem to get the selector to work. I right click in the input box and copy selector using chrome dev tools and I get #company-legal-name > span > ng-transclude > wf:textfield > div > input
But if I put this into the console
document.querySelector('#company-legal-name > span > ng-transclude > wf:textfield > div > input')
I get this error
VM637:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#company-legal-name > span > ng-transclude > wf:textfield > div > input' is not a valid selector.
at <anonymous>:1:10
I have tried many different things but it can never locate the selector. The page appears to be in angular if that makes a difference. Unfortunately, I can't link the page as it's locked to non-admin.
PS:
document.getElementById('#company-legal-name')
returns null
wf:textfield is not a valid CSS selector, hence you get a syntax error:
> document.querySelector('wf:textfield')
SyntaxError: 'wf:textfield' is not a valid selector
whereas without the wf: it is accepted:
>document.querySelector('textfield')
null
I also have doubts about the ng-transclude selector, which I guess is supposed to be a (Angular?) tag name.
You are getting invalid selector because of the colon (:), specifically wf:textfield is not a valid selector for querySelector even if you get it using inspect element.
getElementById will require you to remove the hash in front of the selector#
Solution:
Remove the broken piece (wf:textfield), and write like this,
#company-legal-name input
Looks like we can also use input[name="input_2"] as discussed in the comments.
Related
Trying to convert the below given HTML tag of a Image Button which I want to click but not getting clicked while using Xpath.
HTML Script
<img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1"
id="reg_img_304316340" aralttxt="1" artxt="Show Application List"
arimgcenter="1" alt="Show Application List" title="Show Application List"
class="btnimg" style="top:0px; left:0px; width:23px; height:140px;">
Xpath Generated for the same:
//div[#class='btnimgdiv']/img[#id='reg_img_304316340']/#src
Read some of the articles that for image buttons CSS selector is much better than xpath and wanted to know how to convert the html to CSS selector.
Image BUtton which i want to click but not getting clicked while using Xpath
This is because you are using id attribute value of the element which looks like dynamically generated.
Read some of the articles that for image buttons CSS selector is much better than xpath
Yes, you are right, using cssSeector is much faster than xpath to locate an element.
wanted to know how to convert the html to CSS selector.
You need to use that attribute value which is unique and unchangeable to locate element, you can use below cssSelector :-
img.btnimg[title='Show Application List']
Reference Link :-
http://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
My test shows that the :target selector effect on elements who exist in the DOM when page loaded only. Am I right?
I can't create a snippet here because I can't call the iframe's snippet with hash (#) so you can see the issue here:
http://output.jsbin.com/vixave#new_element
HTML Button
<button onclick="addElement()">Add element</button>
CSS
div:target {
background:red;
color:#fff;
}
Javascript
function addElement() {
document.body.innerHTML += '<div id="new_element">New element</div><br />highlight';
}
In this demo you can see that after you click on the button and the div #new_element added to the body, he doesn't "get" the style. Only when you click on the link which call again to the same URL, the style will be apply.
Update
Further #BoltClock♦'s comment, this happens in Chrome and FireFox but in IE (SO strange) it's working as expected.
Applying styles of :target selectors when a fragment (the string after a # in an URL) is present is the correct behaviour.
The specified behaviour can be found in the W3C Selectors and HTML5 specifications.
6.6.2. The target pseudo-class :target
Some URIs refer to a location within a resource. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).
URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in an HTML document:
http://example.com/html/top.html#section_2
A target element can be represented by the :target pseudo-class. If the document's URI has no fragment identifier, then the document has no target element.
https://www.w3.org/TR/selectors/#target-pseudo
When the document loads and there's no valid name or id attribute according to the below alogorithm, the document has no valid fragment identifier.
5.6.9 Navigating to a fragment identifier
...
If there is an element in the DOM that has an ID exactly equal to decoded fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
No decoded fragid: If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid (not decoded fragid), then the first such element in tree order is the indicated part of the document; stop the algorithm here.
https://www.w3.org/TR/html5/browsers.html#scroll-to-fragid
However, it seems to be unspecified how vendors should deal with inserted nodes with an id or name attribute that equals to the URL fragment (that would make a valid fragment identifier while loading/navigating the document).
I have a WebApp where I need to manipulate certain elements using a CSS file. The CSS classes contain square brackets and other special characters. At least chrome doesn't seem to accept them directly.
<div class="profileElement profile[~redString]">123</div>
Is this class even valid? Is there a way to use the classname? I want:
.profile[~redString]{
color: red; }
When I escape the ~ with a backslash chrome allows me to inject (F12 -> Elements -> the plus symbol on the top right) it to the page but displays the css in grey, meaning the class does not exist in the page.
Is that class valid?
If so, how would I use it?
Is this class even valid?
It depends on what you're validating against.
profile[~redString] is a valid HTML class name, exemplified by putting the markup through a validator.
However, .profile[~redString] is not a valid CSS selector, because the ~ is a special symbol as you have found out, and it's not in a place where the CSS parser would expect it. When you escape it, you get
.profile[\~redString]
which is a valid selector, but with a completely different meaning. It represents an element with a class name profile, as well as an attribute called ~redString. It does not represent an element with a class name that is exactly profile[~redString].
To match this element, you need to escape the square brackets as well. This will result in the entire stream of characters being treated as a single identifier:
.profile\[\~redString\]
Alternatively, you can use an attribute selector instead to make things cleaner:
[class~="profile[~redString]"]
Notice the ~= in this CSS2.1 attribute selector, which works similarly to a class selector.
See both selectors in action:
:first-child.profile\[\~redString\],
:last-child[class~="profile[~redString]"] {
color: red;
}
<div>
<div class="profileElement profile[~redString]">123</div>
<div class="profileElement profile[~redString]">456</div>
</div>
The element is similar to:
<input type="text" class="information">
There is no id for the element.
There is only one text type element inside the information class. I want to be able to enter text into this html element by using casperjs which works on top of phantomjs.
The XPath obtained from chrome developer tools is similar to:
//*[#id="abcid"]/div/div[1]/input
abcdid is the id of the div element which comprises of the text box and a few other elements. But I need a more reliable XPath. I'm not very experienced with finding XPaths so forgive me if the answer is too obvious.
If you want to use XPath selectors for nearly all CasperJS functions, you need to provide it as an object. If the selector is provided as a string it will be automatically assumed that it is a CSS selector.
You can build the XPath selector object yourself:
{
type: 'xpath',
path: '//input[#class="information"]'
}
or just use a XPath utility by first requiring it at the beginning of your script and then using it:
var x = require('casper').selectXPath;
// later ...
var text = casper.fetchText(x('//input[#class="information"]'));
Regarding your selector:
If there is only one input with the information class then you can use the XPath
//input[#class="information"]
or the CSS selector
input.information[type='text']
If the input has other classes too, the CSS selector will work as is, but the XPath selector must be changed to
//input[contains(#class,"information")]
I need to know how to make an empty-non-required input element invalid.
For example:
<input pattern="[0-9]+" title="" />
This field is :valid by default, as is not required. I need to turn it :invalid if it is empty.
Thank you all in advance. Cheers.
EDIT:
HTML:
<div>
<input type="text" name="Country" pattern="[a-zA-Z ]+" title="" placeholder="Country" />
Toggle
</div>
CSS:
input:valid + a
{
color: blue;
}
The <a> starts blue since there is no text inside the <input> which is not required.
The pseudo-class :valid state for an empty-non-required <input> element is true.
I need the <a> to remain uncolored when the <input> field is empty.
You need to add the attribute required, which has the same (limited, but growing) browser support as the pattern attribute. There is no way to make an “empty non-required” element invalid, because the required attribute means that the value must be non-empty.
The description of the pattern attribute in HTML5 CR says the attribute is used in constraint validation only if the value is not empty. This could also be said so that an empty string is always regarded as matching the pattern (but it really isn’t even checked against it).
This answer addresses the clarified/modified question, which seems to be about styling. An input element cannot match the selector :invalid if its value is empty, since such an element is exempted from constraint validation (as explained in my first answer). There is no selector for checking that the value of an input element is empty or non-empty. (The :empty pseudo-class tests for the content being empty, and an input element always has empty content.)
So this cannot be done in CSS (alone). You can use JavaScript e.g. so that any input operation causes the input element value to be checked. If the value is nonempty, put the input element to a class, say ok. Modify the CSS selector accordingly.
<style>
input:valid + a.ok {
color: blue;
}
</style>
<input ... oninput=check(this)>
...
<script>
function check(el) {
el.nextElementSibling.className = el.value ? 'ok' : '';
}
This works in sufficiently modern browsers. If wider browser coverage is needed, you may need to add event attributes like onkeypress and onpaste etc. that are used to run the same check. (And nextElementSibling might need to be replaced by some clumsier way of getting at the next element.)
Update, as per the comment below, you can simplify the code somewhat by setting the class on the input element rather than the a element. This means that the CSS selector would be input:valid.ok + a and the JavaScript assignment statement would have just el.className as the left-hand side. Regarding browser coverage, it’s probably not an issue here as compared with the basic restriction caused by the use of the :valid pseudo-class, which isn’t supported by IE 9 and earlier.