I am testing with Capybara and Selenium.
This is my inspection:
<form id="fileuploadform" enctype="multipart/form-data" onsubmit="return false;" autocomplete="off">
<div class="NFI-wrapper nice" id="NFI-wrapper-14302252427892468" style="overflow: auto; display: inline-block;">
<div class="NFI-button NFI14302252427892468" style="overflow: hidden; position: relative; display: block; float: left; white-space: nowrap; text-align: center;">
Browse...
<input type="file" id="attachmentfiles" class="nice NFI-current" multiple="" data-styled="true" style="opacity: 0; position: absolute; border: none; margin: 0px; padding: 0px; top: 0px; right: 0px; cursor: pointer; height: 60px;">
</div>
<input type="text" readonly="readonly" class="NFI-filename NFI14302252427892468" style="display: block; float: left; margin: 0px; padding: 0px 5px;">
</div>
</form>
If I try to attach_file("attachmentfiles", "some_path"), I get an error saying:
Unable to find file field "attachmentfiles"
If I search the same input through all("input")[0] I get the following:
Capybara::ElementNotFound: Unable to find field #<Capybara::Element tag="input">
The tag 'form' behaves the same way.
I really don't understand what should I do in this case to upload a file.
Thanks,
Luca
First thing you can do is defining:
Capybara.ignore_hidden_elements = false
Another is, just add visible: false as 3rd parameter to attach_file()
Related
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
<div class=" css-0">
<div class="css-zcohbc-singleValue">General</div>
</div>
<div class="css-0">
<div class="" style="display: inline-block;">
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
</div>
</div>
</div>
</div>
I need to sendKeys to the input tag.
WebElement elmnt = driver.findElement(By.xpath("//input[#aria-autocomplete='list']"));
Tried using plain Selinium,
elmnt.click();
elmnt.sendKeys("Text");
Also tried clicking with JS and sending keys
JavascriptExecutor js= (JavascriptExecutor) driver;
js.executeScripts("arguments[0].click();",elmnt);
elmnt.sendKeys("Text");
Could anyone suggest, What I might be missing??
Here I am using the angular material form for login form using Angular5. when the applications starts, the login form placeholder couldn't be over-written. But once one I logged in and logged out, then only the input fields would be over written. Screenshot
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide">{{!hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
CSS File
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
You can use mat-placeholder and handle visibility easily by CSS
styles:
.placeholder.hide-ph {
display: none;
}
component.ts:
<input
...
[value]="value"
floatPlaceholder="never"
(focus)="hidePlaceholder = true" // <== you need this
/>
<mat-icon class="caret" matSuffix>arrow_drop_down</mat-icon>
<mat-placeholder
class="placeholder"
[class.hide-ph]="!!value || hidePlaceholder" // <== and this to hide placeholder by css
>
{{ placeholder }}
</mat-placeholder>
Its working fine for me.
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide"></mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
I am not able to find the element in kedo grid. I have to identify the grid , using that grid i have to identify the cells and enter value in them. but i m not able to identify the grid itself.
Below is the xpath.
IWebElement testoj = driver.FindElement(By.XPath("//*[#id='pricingTableSpreadsheet']"));
if i run this xpath in console it returns the element but wen I run this through code it does not detect the element
HTML
<div id="secContainer">
<div kendo-splitter="" k-panes="[null, { collapsible: true, collapsed: true, min: '235px', size: '235px' }]" k-orientation="'vertical'" id="k-splitter" style="height: 100%; border: 0 solid transparent;" data-role="splitter" class="k-widget k-splitter">
<div role="group" class="k-pane k-scrollable" style="position: absolute; top: 0px; height: 92px; width: 1066px;">
<div ui-view="prdTableView" class="fullHeight ng-scope">
<div ui-view="wipprdView" class="fullHeight ng-scope">
<div style="positi on:absolute; left: 5px; z-index: 900; padding-top: 2px;"></div>
<div style="position:absolute; float: right; right: 5px; z-index: 900;">
</div>
<div kendo-spreadsheet="" id="pricingTableSpreadsheet" style="width: 100%; height: 100%; margin-top: -3px; margin-left: -2px;" k-options="ptSpreadOptions" k-scope-field="spreadsheet" class="noFormula k-widget k-spreadsheet" data-role="spreadsheet">
</div>
</div>
</div>
</div>
</div>
</div>
I am having hard time figuring out how to fix a small alignment issue as shown in the fiddle. The text box and 'R' bootstrap label is not aligned on the top.
https://jsfiddle.net/haribalaji/p7Louzq9/
.inline-form-control
{
display: inline-block;
width: 90%;
}
.labelClass
{
display: inline-block;
height: 40px;
}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Here is the code
<code>
<form>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="form-group">
<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
<div class="input"></div>
</div>
</div>
</div>
</form>
</code>
This fiddle demonstrates the "R" label being the same height as the input and aligned to its right.
As mentioned in the comments earlier, the markup needed to be much simpler:
<div class="container">
<form>
<div class="form-group">
<label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
<div class="col-xs-11">
<input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
</div>
<div class="col-xs-1">
<label class="text-center rLabel">R</label>
</div>
</div>
</form>
</div>
And also, very little custom CSS is required:
.container {
margin: 10px
}
.rLabel {
padding-top: 6px;
padding-bottom: 6px;
background-color: #337ab7;
margin-left: -30px;
color: #fff;
width: 80%;
}
This still may not give you exactly what you want. For example, you may not care for how the "R" label will change width when the window is resized. If so, change the width in the .rLabel class to a fixed width.
Note how the Bootstrap styles are added to the fiddle as an external resource.
Also, note that the use of a container is required.
Updated link to JSFIDDLE
.labelClass
{
display: inline-block;
position:absolute;//added
}
.label {
display: inline;
padding:0 0.6em;//changed
font-size: 75%;
font-weight: 700;
line-height: 1.8;//changed
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Make label position absolute,
Removed unnecessary padding,
Changed line height of label.
Use input group add-on of bootstrap if you are using.
http://v4-alpha.getbootstrap.com/components/input-group/