Unable to find field "username" that is not disabled (Capybara::ElementNotFound) - ruby

I'm trying to test a simple login form using cucumber / rspec / capybara. But I'm having trouble detecting elements on the page and doing any sort of test.
Unable to find field "username" that is not disabled (Capybara::ElementNotFound)
Feature File
Feature: Login
Scenario: correct login credentials
Given I am on the admin_login page
When I fill in "username" with "thomas"
ENV
require 'capybara'
require 'rspec'
require 'capybara/cucumber'
require 'rack'
require_relative '../../config'
ENV['RACK_ENV'] = 'test'
Capybara.ignore_hidden_elements = false
Capybara.app = Sinatra::Application
class Sinatra::ApplicationWorld
include RSpec::Expectations
include RSpec::Matchers
include Capybara::DSL
end
World do
Sinatra::ApplicationWorld.new
end
WEB STEP
When /^(?:|I )fill in "([^\"]*)" with "([^\"]*)"(?: within "([^\"]*)")?$/ do |field, value, selector|
with_scope(selector) do
fill_in(field,visible: false, :with => value)
end
end
HTML
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In To Pied Piper</h3>
</div>
<div class="panel-body">
<form role="form" action="/admin/login" method="post" label="form">
<fieldset label ="form" >
<div class="form-group">
<input label="username" class="form-control" placeholder="username" name="username" id="username" type="text" value="<%= params[:username] %>" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="<%= params[:password]%>">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<button type="submit"><a class="btn btn-lg btn-success btn-block">Login</a></button>
<button>Return to Main Site</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>

I got the same problem with my rails appliction and the way I solved it was by giving an id to that field
<%= f.text_field :name, class: 'form-control',id:"name" %>

Related

Selection variable expressions fields are not working in Thymeleaf

I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);

cypress does not navigate to next page on button click in Angular

I am trying to test web application build in Angular with Cypress.
On clicking a button it should navigate to the next page. However this is not working in Cypress. The application is working fine. Below is the html page.
<h2>Login</h2>
<div class="div1">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<button [disabled]="loading" type="submit" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif" />
<a [routerLink]="['/register']" class="btn btn-link">Register</a>
</div>
</form>
</div>
Added html code

How can loop through different text fields which have same class name

MY HTML
<div class='participants'>
<div class="participant_period" data-view="scorecards/participant_edit" data-model_id="348292" data-model_name="scorecard_participants" data-view-data.model="{"type":"model","key":"model:scorecard_participants:348292","model":"scorecard_participants","id":"348292"}" data-model-name="scorecard_participants" data-model-id="348292"><div class="content-item content-full content-results content-box-score">
<span class="profile-image"><img src="//d3f4b3d8pglafo.cloudfront.net/system/teams/images/348292/thumb/profile" /></span>
<span class="profile-name">Web-driver Baseball Team1</span>
<div class='row'>
<div class='col col-control'>
<div class='final-header'>Score</div>
<div class='period-score'>
<input name=final_score type="text" size="5" placeholder="-" value="" />
</div>
</div>
</div>
</div>
</div>
<div class="participant_period" data-view="scorecards/participant_edit" data-model_id="347821" data-model_name="scorecard_participants" data-view-data.model="{"type":"model","key":"model:scorecard_participants:347821","model":"scorecard_participants","id":"347821"}" data-model-name="scorecard_participants" data-model-id="347821"><div class="content-item content-full content-results content-box-score">
<span class="profile-image"><img src="//d3f4b3d8pglafo.cloudfront.net/system/teams/images/347821/thumb/102px-RedSoxPrimary_HangingSocks.svg.png" /></span>
<span class="profile-name">Boston Red Sox</span>
<div class='row'>
<div class='col col-control'>
<div class='final-header'>Score</div>
<div class='period-score'>
<input name=final_score type="text" size="5" placeholder="-" value="" />
</div>
</div>
</div>
</div>
</div>
I want to fill up the tex fields " input name=final_score " with random data with loop
can anyone suggest me how can i do it
my Watir code is like below
def edit_score_fields
field = #browser.text_field(:name => 'final_score')
data = rand(1...2)
s = #browser.text_fields(:class => "period-score").size
0.upto(s) { |i| #browser.text_field(:name => 'final_score', :index => '#{i}'.to_i).set(data) }
end
Try something like:
#browser.inputs(:name => 'final_score').each do |field|
field.send_keys data
end

How to fill out login form with mechanize in Ruby?

Below the form that I wish to fill with Mechanize; already tried the model commonly used (example there: Using Ruby and Mechanize to fill in a remote login form mystery); but didn't succeed.
<form method="post" action="/sso/login.php" id="form-login-page">
<div id="form-login-container-page" style="color:red;text-align:center;width:100%;margin:10px 0"></div>
<input type="hidden" name="minimalist" value="1">
<input type="hidden" name="SSO_Context" value="/pdf/telecharger2.php?pdfpf=&pdfg=%2Fpdf%2Ftelecharger.php%3Fdir%3DJOURNAL%26file%3D20140603.pdf">
<div class="clear"> </div>
<label>Email<span>*</span></label>
<div class="insc-saisie">
<input class="insc-saisie-champ" type="text" id="login-page" name="login" value="">
</div>
<div class="clear"> </div>
<label>Mot de passe<span>*</span></label>
<div class="insc-saisie">
<input class="insc-saisie-champ" type="password" id="password-page" name="password" value="">
</div>
<div class="clear"> </div>
<label><input type="checkbox" unchecked=""></label>
<div class="insc-saisie">Se souvenir</div>
<div class="clear"> </div>
<label> </label>
<div class="insc-saisie">
Mot de passe oubliƩ ?
</div>
<div class="clear"> </div>
<label> </label>
<div class="insc-saisie">
<input class="b-connexion" type="image" src="/img/trans.gif">
</div>
<div class="clear"> </div>
<div class="clear"> </div>
<label><span>*</span></label>
<div class="insc-saisie">Saisie obligatoire</div>
<div class="clear"> </div>
</form>
Here my attempt
form = agent.page.parser.css('form')[1]
agent.page.forms[1]["login"] = "my_login"
agent.page.forms[1]["password"] = "my_password"
agent.page.forms[1].submit
The following code should work:
page = agent.get("your_page_url")
form = page.form_with(:id => 'form-login-page')
form.login = "my_login"
form.password = "my_password"
form.submit

Bootstrap form validator

I am new to Bootstrap 3. I am creating a login page and I have this code:
* I got this generated from Bootply.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Registry Login</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="input_email">Email</label>
<div class="col-md-8">
<input id="input_username" name="input_email" placeholder="" class="form-control input-md" required="" type="email">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="input_password">Password</label>
<div class="col-md-8">
<input id="input_password" name="input_password" placeholder="" class="form-control input-md" required="" type="password">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for=""></label>
<div class="col-md-4">
<button id="" name="" class="btn btn-default">Login</button>
</div>
</div>
</fieldset>
</form>
I keyed in on my Email field this sample string abcde and I received a small tooltip saying that Please enter an email address. Is there a way for me to change the text?
You'll have to change the form options with Codeigniter, I'm not too familiar with it, but it sounds like it would be under a submit code for a post.

Resources