I'm working on a Safari extension, and I'd like to detect when <applet>s are going to load (the onbeforeload event) on a page. However, there seems to be no such event for these.
How should I do it? Transform all <applet> tags to <object> tags and then intercept their onbeforeload events? I think it would break the document.applets collection, so it's not a very cool solution. Is there a better way?
You can check that using JavaScript. The applet element in HTML DOM has an isActive() property. You can test that on intervals. You can find several basic examples here.
Since <applet> is not very subtle, I just hook on DOMContentLoaded and DOMNodeInserted to catch <applet>s as soon as I can. It's butchy but I don't think I can do any better.
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"
I want to use some new HTML5 form attributes and input types on a webpage. Some browsers already support them, others don't and never will. Thats why I want to use Modernizr - and thats were my trouble begins.
To my understanding, Modernizr alone is not a polyfill but a script that can test if the browser is capable of some new HTML5 / CSS3 stuff. If necessary, a polyfill can be loaded which "emulates" these features so they can be used in non-supporting / older browsers. This is correct I guess?
Regarding the testing / loading: Whats the correct or best way to load polyfills with Modernizr?
In the documentation I found this:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
but some pages also do it like this:
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
Also, how do I actually get to know how these feature detects are called? Something like Modernizr.geolocation surely exists for every feature detect?
In the Modernizr GitHub repository, there are also many user contributed feature detects. How do I implement these into my version of Modernizr? Or is it the best to just use their builder?
In Safari, the HTML5 form validation works, but there is no UI for displaying error messages. Basically, the feature is just half implemented. That's why Modernizr gives a false positive in Safari, like already mentioned here: https://github.com/Modernizr/Modernizr/issues/266
Apparently someone fixed this with such a custom test, but I still don't understand how to use it.1
The two techniques you're seeing are both valid.
In the case of the yep / nope version, this is the ideal way of loading a polyfill that is to be included from a separate file. This doesn't have to be Javascript -- it can also be a CSS file as well.
In the case of the standard JS if() block, this would be more useful if you had a block feature-dependent code in the same JS file that you wanted to switch in or out depending on whether the feature was available.
So both variants have their place.
However, you may also see the if() block option being used to include separate JS files, because the yep / nope syntax was not available in some earlier versions of Modernizr. Yepnope is actually an entirely separate library that has been incorporated into Modernizr in order to make the syntax for loading polyfill files more readable.
Re your question about how to know what the features are that Modernizr can detect, the answer is, of course, in the Modernizr documentation.
Look in the docs (http://modernizr.com/docs/) for the section entitled "Features detected by Modernizr". This has a list of all the features detected, along with the name given to it by Modernizr.
Re the broken feature detect you mentioned -- the ticket you linked to was marked as closed nearly a year ago, and it looks from the notes on the ticket as though the code for the improved test have been added to the main Modernizr code. Make sure you're running the latest version, and double-check whether this is working for you.
Starting with Modernizr v3, using Yepnope through Modernizr.load() has been deprecated. A good alternative is to use jQuery:
if (Modernizr.geolocation){
console.log('match');
} else {
// load polyfill
$.getScript('path/to/script.js')
.done(function() {
console.log('script loaded');
})
.fail(function() {
console.log('script failed to load');
});
}
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
I've looked all over but I can't find any leads. Is it possible to do something like:
//textarea/<some kind of function?>
or
<function>(//textarea)
I know I can do this using JS, or any number of other techniques, but I'm asking because I'm using WebDriver and Firefox to test a TinyMCE textarea input, and because of JS execution delays, I'd like to wait for the textarea to display a certain string after clicking a formatting control and the only way I can think of to achieve this in WebDriver is with SlowLoadableComponent and XPath. That or Thread.sleep but I'd like to avoid that ;)
Thanks in advance.
With TinyMCE, the editor area isn't actually a TextArea - it's an IFrame. Your best bet would be to use Google Chrome (or similar, with Developer-targeted features) to have a look at what TMCE generates. You can then use XPath with something like this:
//IFRAME
which will retrieve all IFRAMEs on the page - or you can add in properties:
//IFRAME[id="myiframe"]
which will retrieve all IFRAMEs on the page with the ID attribute set to 'myiframe'
Hope this helps :)