Here is the html source code for 2 Save buttons in Rails 4 spec. The program should click the first Save:
<div class="btn-toolbar">
<a class="btn btn-primary" href="/view_handler?index=0">
<span class="translation_missing" title="translation missing: en.Back">Back</span>
</a>
<input class="btn btn-default btn btn-primary" name="commit" value="Save" type="submit">
<input class="btn btn-default btn btn-primary" name="commit" value="Save & New" and_new="true" type="submit">
</div>`
Here is the code I tried:
first('input.btn.btn-default').click_button 'Save'
The error returned is:
Capybara::ElementNotFound:
Unable to find button "Save"
What's the right way to click button Save in spec?
The buttons have different text value one is 'Save' and the other 'Save & New'
within '.btn-toolbar' do
click_button 'Save'
end
Should work for your case.
Related
I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.
Snippet
<form>
<div class="hx-form-group position-relative">
<label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
<button type="button" class="hx-button btn btn-danger" _bl_7="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">
<button type="button" class="hx-button btn btn-danger" _bl_9="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">
<button type="button" class="hx-button btn btn-danger" _bl_11="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="container text-center">
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">
New Goal
</button>
</div>
<div class="col-4">
<button type="submit" class="hx-button btn btn-primary">
Save
</button>
</div>
</div>
</div>
</form>
First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this
[https://codepen.io/kukrati/pen/YzaYEXy]
and make sure you have removed its parent .container class
if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class
there is a button in the page with the sintax below
<div _ngcontent-cnw-c181="" class="col text-center ng-star-inserted">
<p _ngcontent-cnw-c181="" class="text-primary font-weight-bold">
Click the button below
</p>
<button _ngcontent-cnw-c181="" type="button" routerlink="/web/click" class="btn btn-primary" tabindex="0" ng-reflect-router-link="/web/click">
<i _ngcontent-cnw-c181="" aria-hidden="true" class="fa fa-check-circle"></i>
Click Here
</button>
</div>
but when I try to localize it using Locator, it returns the error: Microsoft.Playwright.PlaywrightException: 'Unknown engine "routerlink" while parsing selector routerlink=/web/click'
Page.Locator("routerlink=/web/click").ClickAsync();
The only solution I found is by searching for "text=Click here" but I would like to use the "routerlink" keyword instead because the text might change more often in the future.
This should work: Page.Locator("//button[#routerlink='/web/click']").ClickAsync();
I use this razor code to generate a HTML button that calls a function with a value from the model:
Html.Raw(string.Format("<button type='button' class='btn btn-success btn-xs' onclick='setCoordinatorForService('{0}')'>Åta</button>", item.Name))
The value of item.Name is "abc", the code:
<button type="button" class="btn btn-success btn-xs" onclick="setCoordinatorForService(" abc')'="">Åta</button>
I want this:
<button type="button" class="btn btn-success btn-xs" onclick="setCoordinatorForService("abc")'="">Åta</button>
What am i doing wrong?
You must replace ' to \"
If you use this code, probably it works very well.
Html.Raw(string.Format("<button type=\"button\" class=\"btn btn-success btn-xs\" onclick=\"setCoordinatorForService('{0}')\">Åta</button>", item.Name)))
Besides the line you wanted it has error.
onclick="setCoordinatorForService("abc")'=""
part maybe give an error because of =
I have button group in my asp.net mvc application:
<div class="btn-group">
<button type="button" id="btn-create-file-window" class="btn btn-default"><span class="glyphicon glyphicon-file"></span></button>
<button type="button" id="btn-open-file" class="btn btn-default" disabled="disabled"><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" id="btn-delete-file" class="btn btn-default btn-danger" disabled="disabled"><span class="glyphicon glyphicon-remove"></span></button>
</div>
After page reloading I get this result:
If I hover my mouse on the btn-create-file-window in Chrome33, I get expected result (same, as ie10). What am I doing wrong?
Bootstrap v3.1.1 from Nuget
Internet Explorer 10
Chrome 33.0.1750.154 m
my bad English :)
My problem is resolved in Google Chrome 34
I have the following html with multiple inputs:
<input type="submit" value="Save and close" name="commit"/>
<input type="submit" value="Save" name="commit"/>
and would like to use cucumber to test clicking on the "Save" button. However, when I do this in a cucumber test:
When I press "Save"
it clicks on the "Save and close" button, since it appears before the "Save" button.
Looking at the webrat source for finding the button:
def button_element
button_elements.detect do |element|
#value.nil? ||
matches_id?(element) ||
matches_value?(element) ||
matches_html?(element) ||
matches_alt?(element)
end
end
...
def matches_value?(element)
element["value"] =~ /^\W*#{Regexp.escape(#value.to_s)}/i
end
...
it seems like webrat takes the first match, and only matches from the beginning of the content.
Is there any way of making an exact match, so cucumber finds "Save" and disregards "Save and close"?
The click_button() method, which Cucumber uses for "When I press..." takes one of three parameters (text, name, id). You could simply differentiate the buttons using the id or name attribute to specify either.
<input type="submit" value="Save and close" name="commit" id="close_after_save"/>
<input type="submit" value="Save" name="commit" id="save"/>
Then say:
When I press "save"
When I press "close_after_save"
Alternatively, you could scope each button within a div.
<div id="save_and_close">
<input type="submit" value="Save and close" name="commit"/>
</div>
<div id="save">
<input type="submit" value="Save" name="commit" id="save"/>
</div>
Then you can scope the click_button() method:
When /^I press "([^\"]*)" within "([^\"]*)"$/ do |button,scope_selector|
within(scope_selector) do
click_button(button)
end
end