I am testing an Electron/React app using Spectron, which uses the WebdriverIO commands API. I would like to test the attributes on some components, but I want to be sure I am testing them only after the component has reloaded.
The normal WebDriverIO wait commands like waitForText() or waitForExist(), wait for some change, but I need to wait until a component redraw has occurred. For example the component will already exist or will already have some text before it is redrawn. This means any test on the text will occur before the redraw, and I won't be testing the new text. Is there a general way to wait for a redraw?
You can use the custom 'waitUntil' command to wait for just about anything. You'd need to figure out what you're waiting for, or how to tell that the component has been redrawn, but it should be possible.
Is there a class name you can tag in to?
Also, the 'waitFor' commands do take negation flags, allowing you to wait for an element to stop existing or stop having text. That might be useful.
Another solution, to this specific question on waiting for changing text, is to use an XPath selector. The XPath language treats an HTML page like a tree, but text, amongst other things, is also a separate node in that tree. Unlike a CSS selector, you can easily select an element based on it's inner text. See this article.
So if my XPath selector uses a text 'predicate', then I can use a standard waitForExist command from the webdriver API.
For example, say my p element, after the redraw, should have the text 'Burgers'. It did exist before the redraw but it had some other text. To only select it when it has the new next:
const selector = '//*p[text()="Burgers"]';
browser.waitForExist(selector);
Related
I have multiple buttons and form inputs in one page. All these buttons and form inputs need to be disabled or enabled depending on a condition.
I know that it is possible to use the disabled keyword inside a tag to disable a specific input or button. Also, I can just add the code
:disabled="true"
to disable the inputs depending of the boolean value of a variable.
However, this solution is not acceptable for me, since I will have to add this line of code to every inputs on my page (I may create new pages in the future, containing as many inputs).
I would like to know if there's a way that allows me to simply disable the parent container of all the inputs so that the children item (the inputs) are disabled.
If you inspect the Vue instance itself of the VM when running your code you can have something like this when you console.log(this),
It will give you output similar to this if you use the correct scope:
{
$attrs
$options
.......
$el
}
Inside $el there's object properties for accessing firsElementChild, previousElementChild, previousElementSibling, etc. There's a lot of HTML related properties, however, accessing HTML element this way can get messy pretty fast. I think that your best solution is the one you already mentioned or changing the CSS class dynamically.
If you use v-if to conditional render on a parent you can achieve pretty similar functionality too.
See: Conditional rendering
I have a content script in a Chrome extension. I'd like to inject an element into the page, but I need to do so in such a way that the page is unaware of the injected element at all, i.e. it needs to be completely invisible to the page and only visible within the content script context. The page should not be able to locate the element (even with getElementByID), receive events related to it, or anything.
Is such a thing possible? How would I go about doing that? If it's not, what is the closest thing I can do?
If Shadow DOM as mentioned by #Xan doesn't work for you:
The next best thing would depend a lot on what you are trying to do.
A browser action might suit your needs as you could put the data/buttons/etc. you want to display there and the page would not be able to get to it. You could still run a content script to get the data needed from the page.
limit number of characters entered in cognos search and select prompt
`The below script works for text box.
<script>
// The ASDF here comes from the Name property of the prompt
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() :
document.forms["formWarpRequest"]);
fW._textEditBoxASDF.maxLength = 3;
</script>`
I need a similiar piece of code to work with Search and select prompt.
I don't have cognos in front of me but let me tell you how i did stuff like this with Javascript. Please read entirely as there are several approaches.
Put a uniquely named/id DIV tag around your native Cognos select and search prompt(The one your typing in. This will make it easy to reference with Java's dom model for the next steps. We will eventually make this default search prompt invisible/hidden but for now keep it visible until the following steps are coded/debugged.
Create an HTML control in the simliar style as the native Select and search with the proper max-length settings that you want. Use the text box on change event to update the native Cognos select and search prompt. for debugging troubleshooting i find it handy to have javascript alert the DIV innerHTML so you can see whats under the hood with the Cognos control. Sometimes i uses this innerHTML as the starting point for my "Cloned/Shadow" HTML prompt that i have control over.
Once you have your new HTML control effectively changing the Cognos control you can make it invisible.
On complex dashboards/scorecarding i wrote routines to clone cognos prompts and expose their HTML so i could create my own control that would quietly manipulate the actual hidden controls. This gave me complete control over presentation and functionality.
There are many variations on this once you have the controls innerhtml like replacing the innerHTML with one of your own immediately after the page loads that has the restrictions on length. Or simply seeing if you can massage the property learning from the innerhtml.
In Cognos 8.4 and 10 there is a new method to dynamically add a method to a control to be called prior to any other methods. It is tricky but it is on IBM's web site. I may be more cleanly implemented in 10 and also IBM is not shy about showing off these solutions on their web site.
I want to use the Watir to click a link that looks like a button attached the image.
I use the following method,but doesn't works:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).click
Note:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).flash
is working fine but click is not working in IE and FF
Link looks like this:
And HMTL like this:
Note: I am able to click on the element using selenium IDE with clickAt method
Try this (not tested):
browser.link(:class => "x-tab-strip-menu").click
If you can flash the link, but click does not do what you want, see this: How to find out which JavaScript events fired?
FYI what you have are links that are using standard background images controlled via CSS magic that keys on the class of the link to know what background to set. That's where the image comes from, and why you don't see it as part of the link in the HTML.
In that control, each tab is a list item element (li) in an unordered list (ul), and each list item has an ID, so that's the easiest way to tell it which tab you are trying to click inside.
Try identifying things starting with the LI that is the tab container, as within that container there is only one instance of each link of a given class. Of the 4 links, only one is without any kind of easy identifier, and if you need to click that one you'd need to use :index, but for the other 3 links using :class ought to work. This should result in code that is less brittle and subject to being broken if the order of tabs changes, or the page is refactored.
#browser.li(:id,"NetworkAnalysisTabPanel__ext-comp-1038").link(:class, "x-tab-strip-menu").click
If the number at the end of the ID is subject to change, you can try a regular expression to match the part you can predict and is unique from the others
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").click
If you can reliably identify the object and use .flash but .click does not seem to do anything, you may have to use .fire_event('onclick') instead or .click.
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").fire_event('onclick')
If that does not work, then you need to start experimenting with likely events that the control might be looking for (which will not necessarily show up in the HTML btw.. it may be in javascript or CSS etc)
UPDATE
This is where having an live example of the control that we can interact with is critical. doing some googling on the class names I was able to find one here and that let me play with it a little, and what I discovered is that it is looking for onmousedown. so, on that site, this works
browser.li(:id, 'TabPanel1__ctl07').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Now since those ID's may not be the best identifier, a bit more digging (using .text on the li that holds the tab parts) found me some text, which in a menu like that ought to be unique.. SO, we can change this to make things a bit more robust and clearer as to what tab I'm clicking on (this will also be less subject to breaking if the tabs change around.
browser.li(:text, 'Menu 1').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Lastly, since the click is causing client side code to execute, you may need a brief pause (a one or two second sleep) to wait for that portion of the page to re-render etc.
Our web application has some event code to "format" any text with pasted into a field so that any HTML styles do not break our data.
What would be a good way to pre-load the browser clipboard so that I can test pasting into the input field?
Is there any way to do it programmatic-ally or would I have the test script visit "a source page" and copy text before moving onto our application?
Any ideas or code snippets would be welcome.
Working with the clipboard will depend on your platform. E.g. on OS X, you can use pbcopy and Command-V:
open('|pbcopy', 'w') { |io| io << 'some text' }
browser.text_field(:name => 'q').send_keys([:command, 'v'])
I know there are equivalents on Linux (xclip?). Not sure about Windows.
I would consider using the .value= method to set the value. If it's been implemented the same as in watir, then it causes no events to be fired and sets the value directly, and then follow that up by sending an appropriate event (depending on what if any events are being monitored) such as onKeypress. I tried to figure out from the Watir-webdriver rdoc for textfield, if this distinction between .set and .value= has been maintained, but the way the doc describes them (at least there) makes them seem interchangable.. (Jarib can you clarify???)
Potentially you might need to first fire something like onFocus depending on the controls you are using. For example, as described in this SO case Setting a text field that has a JQuery mask on it for a jquery mask, they had to end up firing an unmask event to be able to even set the field.
This is a good case for utilizing the techniques described here How to find out which JavaScript events fired? and in the SO item linked in the comments for that question, to figure out just what events are fired when you manually paste something into a field. (note I would slueth it with both using the mouse, but also using something like tab to move between fields and set the focus, events common to those two methods are the ones most likely to be implemented by the controls.
I presume you have some kind of client side javascript that needs to check what was pasted into the field, and thus the reason for this test. If you are using standard HTML fields, with no javascript stuff, then I would consider this particular test case to be effectively the same as 'testing the browser' since supporting cut and paste in input fields is a standard browser function. In that case, you are sort of 'off the reservation' and I'd not bother with such a test case.