i want to upload a pic using robot framework into this :
I tried this :
Add PJ
Scroll Element Into View xpath://div[#class='drop-zone text-center']
Choose File xpath://label[#class='label-dropZone'] ..\Resources/Robot-framework-logo.png
but i'm getting this error :
ElementNotInteractableException: Message: element not interactable
What the underlying Selenium function behind Choose File does is to enter the text you give to it (that's the path to the local file), in an <input> element. These elements are the ones defined in the HTML standards for uploading files.
In "fancier" upload UI these input are hidden - the user doesn't see the file path, but sees explanatory text "choose a file here or drag&drop it", with pleasing formatting. This is the case with your example - and targeting that <label>, Selenium has failed by saying it is not interactable - one cannot "type" on it; it does need an <input>.
You may/should try to find the <input> in the form, though hidden, and target it. Sometimes that is not possible though - there might be JS code preventing you to change it; so the success rate is varying.
Related
I'm starting with capybara, cucumber and webdriver, and I was given the task of testing the upload of an image field.
So I simulated a shipping environment in which I could learn, it worked correctly, however, I need to leave the element "hidden", and I don't know if there is any method for capybara to select it.
So my code went in this direction:
HTML
<input type="file" name="attach-file" style="display: none;">
Capybara/Cucumber
addMedicine_page.attach_file('attach-file', 'assets/asset.jpg')
However it results in an Unable to find visible file field "attach-file" message that is not disabled (Capybara :: ElementNotFound)
If you're going to make the file input element non-visible you have to have some visible element available for the user to interact with which will in turn trigger the file inputs file selection. The best solution in that case is to use the block accepting from of attach_file
page.attach_file('assets/asset.jpg') do
# perform whatever action the user would to trigger the file selection
click_button 'Upload file'
end
if you can't that to work for you, you really should be able to and it most closely replicates a users behavior therefore making the test most valid, then you can use the make_visible option
page.attach_file('attach-file', 'assets/asset.jpg', make_visible: true)
which will temporarily make the file input visible, attach a file to it, and then re-hide it. If the standard CSS applied by make_visible by your page doesn't work to make the input visible you can set hash of CSS values to use rather than true
See https://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Actions#attach_file-instance_method
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
New to meteor , I am using meteor.js to create a simple project like this
I used <input value="{{counter}}" /> to create this input box showing value consistent with the paragraph.And it is working fine as you see.
However as I check the DOM tree in dev tools of chrome, I see <input> instead of <input value="1"> as I supposed it would be.
Why is the attribute value invisible here in DOM tree?Meanwhile,Can someone explain why I can see the number in input box even though I can't find the value attribute in DOM tree?
This is because Meteor packages all your template's js and html files in the same javascript file at build time.
Then the DOM is manipulated through javascript only. And lots of changes made to DOM elements through javascript do not show up in browser's consoles. For example, try to change an element's data attribute with jQuery data() and you won't see any new data-... attribute, same if you change your input's value by typing $('input').val('some value') in the console, the value will change but the value attribute won't show up.
If you open the console in your example (assuming that you are using Chrome, press F12) and switch to "Sources" and then open the only js file named '36dcbdf8917964892be8bca43c71d137318461f5.js' you will see that the value of the input is set through javascript (at line 82):
...
HTML.INPUT({value:function(){return Spacebars.mustache(e.lookup("counter"))}})
...
I'm currently trying to display an icon in a data view. The configuration of the icon column is very simple, selectedValue is equal to 1 and the icon to be displayed is in the icon resources of the database. The xpages theme is currently set to Bootstrap4XPages. The page does not display in the browser. When I set the theme to OneUI, the page displays fine with the icon. Can anyone indicate a way to debug this? Here is a snippet of the error-log on the domino server. I removed most of the exception values to keep the post as short as possible. :
<CommonBaseEvent creationTime="2015-01-12T13:49:54.885-05:00" globalInstanceId="EL0a94000600014a3fc8c8ac000001c0" msg="CLFAD0246E: Exception occurred servicing request for: /test.nsf/test.xsp - HTTP Code: 500" severity="50" version="1.0.1">
<extendedDataElements name="CommonBaseEventLogRecord:level" type="noValue">
<children name="CommonBaseEventLogRecord:name" type="string">
<values>GRAVE</values>
</children>
</extendedDataElements>
<extendedDataElements name="CommonBaseEventLogRecord:sourceClassName" type="string">
<values>com.ibm.domino.xsp.bridge.http.engine.XspCmdManager</values>
</extendedDataElements>
<extendedDataElements name="CommonBaseEventLogRecord:sourceMethodName" type="string">
<values>service</values>
</extendedDataElements>
<extendedDataElements name="CommonBaseEventLogRecord:Exception" type="string">
<values>Context Path: /test.nsf
Page Name: /test.xsp
java.lang.NullPointerException: Argument Error: One or more parameters are null.
at com.sun.faces.renderkit.html_basic.HtmlResponseWriter.writeAttribute(HtmlResponseWriter.java:308)
at com.ibm.xsp.theme.bootstrap.renderkit.html.extlib.data.DataViewRenderer.writeIconColumn(DataViewRenderer.java:267)
at com.ibm.xsp.extlib.renderkit.html_extended.data.DataViewRenderer.writeStandardRow(DataViewRenderer.java:792)
at com.ibm.xsp.extlib.renderkit.html_extended.data.DataViewRenderer.writeRow(DataViewRenderer.java:570)
at com.ibm.xsp.extlib.renderkit.html_extended.data.AbstractDataViewRenderer.writeRows(AbstractDataViewRenderer.java:816)
at com.ibm.xsp.extlib.renderkit.html_extended.data.DataViewRenderer.writeRows(DataViewRenderer.java:548)
at com.ibm.xsp.extlib.renderkit.html_extended.data.DataViewRenderer.writeContent(DataViewRenderer.java:256</values>
</extendedDataElements>
<sourceComponentId component="Expeditor 6.2" componentIdType="ProductName" instanceId="" location="notes" locationType="Hostname" subComponent="" threadId="1" componentType="http://www.w3.org/2001/XMLSchema-instance"/>
<situation categoryName="ReportSituation">
<situationType xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ReportSituation" reasoningScope="INTERNAL" reportCategory="LOG"/>
</situation>
</CommonBaseEvent></CommonBaseEvents>
The problem lies here from the error: com.ibm.xsp.theme.bootstrap.renderkit.html.extlib.data.DataViewRenderer.writeIconColumn(DataViewRenderer.java:267)
It is a bug, one that I discovered myself just recently. I have a fix identified for it that we will release in the next extlib version (not sure when that will be). When the title attribute is left empty for the icon, it attempts to use the alt attribute as a title instead. The problem is it doesnt check if an alt value exists, and when it doesn't it tries to write null as an attribute, and you get the NullPointerException. Simple fix in the DataViewRenderer code.
I think you can work around the issue though if you set either the title or alt attributes of the image icon. So give that a go for now.
Check devtools (browser debug tools) and see if there is an Icon in the html code and see it the path is valid. If there is no icon then maybe the bootstrap plugin may not support it.
Either way, you can always easily add an icon client side using jQuery or plain client side JavaScript
I am trying to automate a work flow process .In this,I need to click on a link positioned in any of the rows of table.Thing is all links available in all rows have same element ID and in the source code I have a java script like " ("Element ID" # Onclick..java script****:).....SO here after clicking it is connecting one form to another form by inputting some value in java script code and also one value in java script dynamically changes.How do I click on that link now?Is there any solution using xpath or so...to exactly click on that link based on CSS classID or so...Please help me out..Main problem is...all links in rows have same element ID and dynamically changing java script .
I am trying to use selenium.focus() and selenium.clickAndwait().But these are helpless.as it is not able to identify link ID only.
The best way to do this would be with xpath.
Something like //*[#onclick='javascript'] will work but this can make the tests extremely flaky because if the inline javascript changes or if its removed in preference of addEventListener to the element.
something like //*[#class='cssClass'] will work. I think that you will need to speak to the developers and ask them to help make it more testable.