Does anyone know how to delete an element from the source using Watir? There doesn't seem to be a method for removing elements. Perhaps I'm missing something.
If you know JavaScript, you could execute any JavaScript code on the page.
Example:
browser.execute_script("some javascript code")
I am not a JavaScript ninja, but this question could help you: JavaScript: remove element by id.
Remove elements by css:
browser.execute_script("[...document.querySelectorAll('.some.class')].map(e => {e.parentNode.removeChild(e)})")
We can remove it with javascript. Here's an example to remove a breadcrumbs div element but it's id:
browser.execute_script("bd = document.getElementById('breadcrumbs'); bd.parentNode.removeChild(bd);")
The Purpose for Watir is to do web testing, which is to say drive the browser as if a user was interacting with it. That means doing the things a user could do, clicking on stuff, filling in input fields, etc. It also means being able to verify what is there on the screen that the user can see or interact with.
Since a user cannot delete elements, there is no means by which to do that using the tool.
If the application provides a way for users to 'remove' or 'delete' something, like closing a simulated window, removing a tab etc, then you need to do that by simulating what the user would do (usually clicking on some specific element) in order for that to happen.
Related
I have a set of tabs with proper roles and attributes for accessibility support. The content that tab controls gets loaded in via ajax. But each wrapper for the content loaded in also has proper tab pane roles and attributes.
The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding ID of the tab pane is missing for all of the tabs except the one that's currently active (because that wrapper with ID has been loaded). The exact error states: "ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM."
Since the ID will exist once the tab with the corresponding aria-controls attribute is active, is this really an error? Or is this just a case of a false positive because it's an automated test and they can only do so much.
In summary, What does aria-controls do and does it really need to refer to an ID that currently exists in the DOM?
aria-controls give your assisting technology a way to move to the controlled element.
If this element is not in the DOM or can't be accessed, then yes it's an error.
The two (the element with aria-controls as well the element with the referenced id) must exist at the same time, whether at page render or via JS injection.
The DOM is parsed by the UA/AT combo before the user even gets to the control or your script fires to make it exist. If you use JS injection then you need to make sure the DOM is re-parsed.
This would apply to aria-owns as well.
I don't know whether the following would work in your architecture, but it would solve the error problem:
Design the tabs so they are all in the page at the time it loads. Format those that should not be shown to be outside the viewport using absolute positioning and something like "left: -99em." Use AJAX to reset the positioning when the time has come to display the tabs. The result is that the ARIA ID dependencies will always be valid because the tabs are always part of the DOM.
I'm using Capybara on a form that has multiple checkbox fields with an "Other" option. The Capybara API gives us
page.check('Other')
but no way (that I can find) to limit the scope to a given field. You can limit the scope based on a CSS (or XPath) selector, but since none exist that make sense this requires that I either change the (ugly legacy) markup of the page just to accommodate Capybara, which seems like the wrong solution. (In a perfect world I'd have time to completely refactor the markup, and wind up with something semantically sensible that also gave me a way of selecting a scope for Capybara, but this is not a perfect world, and I don't want to just jam in classes all of the place to accommodate Capybara.)
This
page.within('[name=FieldName]') do
page.check('Other')
end
doesn't work, either, since Capybara is looking for a single parent node that it can use as the scope, and this gives a set of checkboxes. (It would be nice if Capybara supported that, but it doesn't.) It's like I'm passing a deck of cards to search through, and Capybara wants the box the cards go in, but I don't have any box.
I'd like to be able to do something like this
page.check('Other', :in => 'FieldName')
but I can't find anyway of doing that. As far as I can tell, the only options that can be passed in are text, visible, and exact. Am I missing something? Is there a way to do this without resorting to ugly workarounds?
Since you have a css-selector that can find the checkbox, you can use the find method to locate the checkbox.
page.find(:css, '[name=FieldName][value=Other]')
Then to check the checkbox, use set (which is used by the check method):
page.find(:css, '[name=FieldName][value=Other]').set(true)
You could also use the click method:
page.find(:css, '[name=FieldName][value=Other]').click
This is not the most elegant solution, but since no one is posting a better one (so far), here's the best I've come up with.
Just execute a script to do what you need. In my case I'm using jQuery:
page.execute_script('$("[name=FieldName][value=Other]").trigger("click");')
There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".
I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.
Is there anyway of marking several different rows in a scrollable data table ?
I know how to mark one row
b.div(:id, "listProductsForm:productList:bc_4_0").click
I just want to simulate the "Ctrl"- button is pressed down
How does your "scrollable data table" looks like? Show us the HTML. I see that you are using div tag to access one element.
You probably need to fire some JavaScript event. See How to find out which JavaScript events fired?
The chances are good that you will need to use a combination of Watir::IE.send_keys() and the click actions on the document.
Try something like this:
#browser.send_keys("{CTRLDOWN}")
#browser.div(:id, "listProductsForm:productList:bc_4_0").click
#browser.div(:id, "listProductsForm:productList:bc_5_0").click
#browser.send_keys("{CTRLUP}")
Watir API documentation: http://wtr.rubyforge.org/rdoc/1.6.5/classes/Watir/IE.html#M000497
The documentation above links to the specific key commands that can be sent. I'm pretty sure this will require that you have AutoIt installed.