I've created a simple example http://jsbin.com/yifekigo/21/edit. It works in Chrome and does not in Firefox/Safari. It will work in Firefox if I change <nest-row mCols="{{mCols}}" y="{{y}}"></nest-row> to <nest-row mCols="4" y="{{y}}"></nest-row>.
How can I get Firefox and Safari to pass the value of mCols from nest-grid through to nest-row?
EDIT: See Scott's comment on his answer for the use of domReady as a workaround.
Sadly, on Firefox/Safari/IE, the DRY Polymer syntax is not supported in the main document. IOW, you must do:
Polymer('nest-grid', {...
instead of
Polymer({...
Again, this is only true for calls like this in the main document (which typically includes JsBin and friends). Polymer elements in imports can use the DRY syntax on all platforms.
Sorry for the trouble.
Related
Long time automation developer here (just for context).
It's been bugging me for quite a while that the dev tools in chrome used to find elements just don't seem to work as I expect. Hopefully someone can point out what I'm doing wrong.
Looking at , say, sauce labs page: https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class
ok now that page has div's and anchors
and indeed I can do find ('a') or find('div')
but why do I have a problem using classes or id's ?
The find() method refers to window.find(), a non-standard API for the browser's built-in Find function. It does not find web elements the same way Selenium or Capybara do, and so it does not parse the input as a selector.
You find elements with selectors in Chrome DevTools using document.querySelector() or document.querySelectorAll(). There are no special methods in Chrome DevTools for this, however it does provide the $() and $$() aliases (respectively) to save you time and keystrokes.
You can use jquery code in chrome console, for example if you want to find something with class of "foo" you can write $('.foo') or a id of "bar" you write $('#bar')
You can read all about it here
Also you can just google what you want "Jquery how to find a div with id"
My website works fine in Chrome.
I am trying to get it working in IE11 as well.
But see an error message at this line of code.
When i go in, i see that it is due to below line of code in paper-button element.
From past experience i know that polymer doesn't work in IE11 if i don't use colon separator and use function keyword to declare a function in javascript. e.g. as shown below.
_onDownKey: function(event) {}
I am using Polymer 1.9.3
Need guidance on understanding this new get keyword.
What is this new get keyword in front of the function name, what it does and how to make polymer elements compatible with IE11 as well if possible ?
Information about get can be found here. Obviously IE is not able to use this, thats why you have to transpile your code from es6 to javascript/es5. You can use polymer build for this. Also if you transpiled your code and if you have included the webcomponents polyfill it will work in IE11. Hope this helps!
Can anyone suggest an xpath expression to find the following node using the value 'DRIVE_20150917-162707' ?
<h4 ext:qtip="DRIVE_20150917-162707"></h4>
Not sure what the issue is, what have you tried? The following:
//h4[#ext:qtip="DRIVE_20150917-162707"]
will find all h4 elements in the document with the value ext:qtip="DRIVE_20150917-162707". As with any namespace, you must make sure to bind it properly. If you can't or don't know how to, you can try this:
//h4[#*[local-name() = 'qtip'][. ='DRIVE_20150917-162707']]
Update: apparently, Selenium now allows namespace prefixes and according to the source (or better, the current version), they automatically register them against a given prefix. They warn you that it won't work on Android.
Not sure it is the current stable branch, not sure their fix also works with attributes in a namespace, but the problem you mention in the comments below have a different cause (i.e., your document simply does not contain the node). Have a look at Firepath to try it live in the browser, it should work the same as in Selenium.
Update, try the expression above online
Just click the link, I created a little demo. If you still got stuck, then please give a minimal example that demonstrates the wrong behavior.
Update 2, bugs in this approach with Firefox, and a workaround
As per your comments below, where you say it works with local-name() = 'ext:qtip', the expression local-name() on an attribute node returns the prefix and the local name. This may be the result of MDN saying that the namespace axis is not supported, or the result of this bug report never implemented (see specifically Michael Sperberg-McQueen's comment #28).
It is a strange bug, as the description of local-name() at MDN clearly follows the description of the official XPath standard and does not mention incompatibilities.
And I found another strange bug. At least while using Firepath (which uses Firefox XPath underneath), I got the following results on the html element of an HTML5 document:
<!DOCTYPE html>
<html xmlns:my="http://other">
<head>
<title></title>
</head>
<body my:other="Yes, in another world!">
<p>Hello world!</p>
</body>
</html>
local-name(//*[1]) returned "html", correct
name(//*[1]) returned "HTML", incorrect
namespace-uri(//*[1]) returned " http://www.w3.org/1999/xhtml", correct, but not in line with what name() returned
local-name(//body/#*[1]) returned "my:other", incorrect
name(//body/#*[1]) returned "my:other", correct
local-name(//body/#*[1]) returned "" (empty string), incorrect
I tried both with and without the namespace declaration in place, it made no difference. This is clearly a bug in Firefox handling namespaces, not sure whether it has been reported (couldn't readily found a bug report other than the one already mentioned). Other browsers may do this differently, even correctly, I only tested with Firefox.
Given all these strange behaviors in Firefox, the obvious workaround is to use #*[local-name() = 'ext:qtip']. To make this cross-browser friendly and standards-compliant, use:
//h4[#*
[local-name() = 'ext:qtip'
or (local-name() = 'qtip'
and namespace-uri() = 'fill-in-proper-ns-uri'
)]
[.="DRIVE_20150917-162707"]
The problem is with colon (":") character.
with css selector you can find
h4[ext\:qtip~=DRIVE_20150917-162707]
The xpath mentioned here worked perfectly for me
//[#[local-name()='ext:qtip'][.='Buyer']]. This xpath is for
Hello kind people of the internet,
I've been hacking at this for a while...and have seen several similar postings, but I can't seem to figure this out:
The HTML5 input field validation CSS works in Firefox, Chrome...but alas, not in IE8...and much of my target audience will be using IE8.
...and yes: I'm using Modernizr, and I used Initializr to get the page template and CSS...I'm a bit confused why I can't get things working properly in IE8.
Here's a link to my test page:
Test html5 page
The input field is red before proper entry, then validation simply turns green when input a valid account number, such as:
50011111111
The HTML5 code is as follows:
<label for="account">Account Number: </label>
<input id="account" name="inputAccount"
placeholder="input billing account number"
pattern="/(^500)|^\d{11}"
required
autofocus
type="text"/>
Any suggestions on what is probably a fairly simple thing to fix would be mucho appreciated!
IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs
Modernizr runs through a little loop in JavaScript to enable the
various elements from HTML5 (as well as abbr) for styling in Internet
Explorer. Note that this does not mean it suddenly makes IE support
the Audio or Video element, it just means that you can use section
instead of div and style them in CSS.
What this says is that Modernizr will tell IE about the new tags in HTML5 so that you can use CSS on them, but dosen't actually make them do anything. Note too that Modernizr dosen't add default styles for the elements, so they recommend you use an HTML5 CSS reset that makes <section> tags display: block; for example.
With respect to your form validation topek was correct in explaining that Modernizr only detects browser capability, it dosen't actually do anything about it. The proccess behind Modernizr is that you use the built-in yepnope testing feature to see if the user's browser can do 'x' (in this case form validation) and then conditionally and asynchronously load a script or style to "polyfill" (a polite way of saying 'use javascript to mimic native behaviour) for it.
In your case, you will want to use Modernizr.load() to test for Modernizr.input.required and probably Modernizr.input.autofocus too, like this:
//the modernizr conditional load function
Modernizr.load({
//specify the tests, refer to the Modernizr docs for object names
test: Modernizr.input.required && Modernizr.input.placeholder,
//specify what to do if the browser fails the test, can be a function
nope: 'path/to/polyfill/script',
//sometimes you need to run some JS to init that script
complete: function(){ polyfillinitorwhatever(); }
});
And there you go, a pretty stripped-down Modernizr.load. While I find their docs meandering, they actually are very good. Every time I've had a problem and tweeted at Paul Irish, he's sent back a link to the docs where I actually did find my answer upon closer inspection.
Validation is one of the most complex HTML5 features for the browser makers to implement as a standard. While I really like it's simplicity, I've been continuing to use jQuery.validate in all cases except if the user has Chrome or Opera - the FF native validate is weak still. I'd recommend you stick with jQuery for now.
I recently found a new plugin jquery.h5form.
Using this, form validation, like in Opera, will be enabled in all browsers, even IE8.
I think, what you are still missing, is a html5 polyfill for the field validation. You could use for example: http://ericleads.com/h5validate/
More polyfills can be found under: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
IE8 does not support all, if any, HTML5 elements. You need to have an addon for html5 to work. One addon is modernizer
List of browsers with their score/compatibility in HTML5
How to create XPATH for a HTML DOM element?
for example, "/HTML/BODY/DIV[1]/TABLE[1]/TR[2]/TD[1]/INPUT".
Given an DOM element how to get this XPATH string?
Any ideas?
Thanks,
Dattebayo.
You can create a new domdocument and then import the node element
$DD= new DOMDocument('1.0', 'utf-8');
$DD->loadXML( "<html></html>" );
$DD->documentElement->appendChild($DD->importNode($DE,true));
then you can use xpath insithe the domelement:
$xpathe=new DOMXPath($DD);
As I recall, the xpath checker extension to firefox gives you a point-and-click interface for getting the xpath to DOM elements in a HTML document.
After a lot of struggle I found a way to do so.
Along with the DOM path also use the SourceIndex of each node. Like "/Html:1/Body:2/Div:5/Input:6"
But again,
1. This might not work in case of dynamic page (ajax to modify the content).
2. This might not be unique accross browsers since the sourceIndex might vary accross browsers based on the Browser Rendering Engine arranges the nodes. (not sure of this yet though, just a thought).
In Mozilla an xpath generator component was implemented although it never made it to default builds.
You can find the tests in the "final patch" attached to the bug I linked to to see how it can be used. You can also look up its implementation, might be helpful.
Here is a chrome extension that might help you (ChromyQlip)
https://chrome.google.com/extensions/detail/bkmllkjbfbeephbldeflbnpclgfbjfmn