How to click on a button that can only be identified by a custom attribute? - ruby

I'm just getting into automated testing and I've been writing some code for a fake site that a friend set up for me for testing. The test I'm writing is meant to click on an "Add to Cart" button, however each of the button have the same exact class and the only way to really identify them is through the custom attributes.
This is the code for the button i'm trying to click
<a class="btn btn-success btn-block addItem" data-id="1" data-name="Chocolate Cups" data-price="1.00">Add to Cart</a>
(I'm trying to click on the button by using the data-id attribute)
Each of the buttons have the same class so they can't be identified that way otherwise an error pops up saying that the result is "Ambiguous" and thus can't do it.
I used the code below and managed to identify a specific button however I'm not sure how I would now click the button.
Given("I'm on the sweets list page") do
visit("https://sweetshop.netlify.com/sweets.html")
end
When("I click {string} button") do |string|
page.should have_css("*[data-id='1']")
end
Then("add the item to cart") do
end

You can try something like:
Then("add the item to cart") do
find(:css, "*[data-id='1']").click
end
or
Then("add the item to cart") do
find(:xpath, "//*[#data-id='1']").click
end
Similar post: Cucumber/Capybara Selecting Button from Specific Class?

Related

How to click a span in capybara tests?

I'm trying to click on a checkbox, but when I run the action, it doesn't work.
I'm using the same way to click buttons and other elements.
I'm using a data-testid to find the checkbox in the view.
I need to click on the checkbox, and after clicking execute the actions of the next step.
This checkbox is a react component that will have a span in the view.
context 'when the user agrees to charges by clicking a checkbox' do
before do
# sleep 1000
wait_before_clicking
page.find("span[data-testid='prepay-enrollment-modal-agreement-checkbox']").click
end
it 'renders new content for the user to review payment details' do
expect(page).to have_selector("[data-testid='review-step-container']")
expect(page).to have_content("Your Plan")
expect(page).to have_content("100 pages/ month")
expect(page).to have_content("Plan cost for 12 months, before discount")
expect(page).to have_content("Prepay discount (10%)")
expect(page).to have_content("Total Due:")
end
end
The data-testid attribute is on the input element not on the span, so find("span[data-testid='prepay-enrollment-modal-agreement-checkbox']") won't work. If you put the data-testid attribute on the span rather than the input then it would work, however there's a better way. Since the checkbox has an associated label element you can just tell Capybara it's allowed to click on the label element if necessary. First, since you're using test ids, set
Capybara.test_id = 'data-testid'
in your global config, and then in your test just do
page.check('prepay-enrollment-modal-agreement-checkbox', allow_label_click: true)
Note: rather than expect(page).to have_selector("[data-testid='review-step-container']") you should use expect(page).to have_css("[data-testid='review-step-container']") to make it clearer that you know you're passing CSS. Also for test speed reasons you may want to combine all of the have_content calls into one using a regex

watir element click intercepted:

I'm trying to click on a button that contains the words "Add To Cart" using ruby/watir.
If I use
cart = browser.link(text: 'Add To Cart')
if cart.present?
cart.click
It works (item gets added to cart) but I get a element click intercepted: Element ... is not clickable at point (441, 20). Other element would receive the click: (Selenium::WebDriver::Error::ElementClickInterceptedError
I'm new to ruby/watir so any help would be greatly appreciated.
Try this code whether it works. If it's not working then as you have stated, even after the error, it works, So I assume we have to issue the click on the element which is overlaying the target element. So Paste the entire error message. The error message must contain the element which is actually obscuring.
require 'watir'
b = Watir::Browser.new
cart = browser.link(text: 'Add To Cart')
if cart.present?
b.wait_while { cart.obscured? }
cart.click
end
Update
Okay, there are other two ways you have to try.
One is to use JavaScript.
cart.click!
Or click the element which is overlaying your element.From your error the element is division with class attribute 'row'. If you have more detail about that element, you can locate that element by yourself. But now, with the given detail, I form the locator.
b.div(class: 'row').click
there are few ways you can figure what is going on
try looking around the element
check if watir sees more than one link, this should produce 1
browser.as(text: 'Add To Cart').count
then try to click every element if it has more than 1
browser.as(text: 'Add To Cart')[0].click
browser.as(text: 'Add To Cart')[1].click
or try to click its parent, link can be behind overlay
browser.a(text: 'Add To Cart').parent.click
then check if same can be acomplished by clicking parent element directly
browser.div(class: 'wishlist_cart_button').click
or you can try with different approach, find element by some other attribute
browser.a(href: /setCurrentId/).click
also maybe there is a parent element with id so you can find the cart button easier
browser.element(id: "asdf").a(text: "Add To Cart").click
browser.element(id: "asdf").as.last.click
if everything above fails, then click it with selenium, since watir is worried about click being intercepted
browser.driver.action.move_to(browser.a(text: 'Add To Cart').wd).click.perform
hope something helps :D

How data-to works as attribute of button in phoenix?

Phoenix.HTML.Link provide a button helper which will generate a html code below:
button("hello", to: "/world", method: :get, class: "btn")
#=> <button class="btn" data-method="get" data-to="/world">hello</button>
The data-to will navigate to the new page when clicking the button. How is it work? I suspected it should have some js code to handle this action but I couldn't found in documentation or source code.
The reason I want to find it is because it generates the new URL with _csrf_token=&_method=get and I want to remove it.
I have found the answer.
The button action is handled by the phoenix_html.js, which generates a form object and submit the form.

How to auto click button within iframe with no name or ID in VBScript

I'm trying to create a very simple vbscript but can't make it to do what I want.
I have a webpage lets call it "www.testing.com" that has many buttons (over 10 of them) that look and code the same:
<button type="button" class="text-uppercase promotion__btn btn btn-primary btn-sm">Get started now</button>
As you can see there is no name or ID for the button so I didn't find any solution in all my search for how to click the first button among them all.
My code for opening the webpage is very simple:
set IE = createobject("internetexplorer.Application")
IE.statusbar = false
IE.menubar = false
IE.toolbar = flase
IE.visible = true
IE.navigate("www.testing.com")
wscript.sleep(2000)
I tried to use this code with no success:
For Each btn In IE.Document.getElementsByTagName("button")
If btn.type = "button" Then
btn.Click()
Exit For
End If
Next
Appreciate the help.
Thank you for your time
Edit:
As user Lankymart recommanded 'IE.document.getElementsByTagName("button")(0).Click() does click the first button on the page but not the button that I need it to.
The button that get clicked by this command has the code: <button class="strong-action-button icon-plus js-create-new-catalog full-width">Create New Catalog</button>
While I'm trying to click a button with the code: <button type="button" class="text-uppercase promotion__btn btn btn-primary btn-sm">Get started now</button>
As you can see the button that I want to click on has type="button" so I'm trying to find a way to match Lankymart command with a something else that will help me click button that has that type in its code.
I tried the folloing code but nothing getting clicked and I don't get any error message so I assume I'm doing something wrong:
For Each btn In IE.document.getElementsByTagName("button")
If btn.type = "button" Then
btn.Click()
Exit For
End If
Next
EDIT 2:
My code looks like that right now:
set IE = createobject("internetexplorer.Application")
IE.statusbar = false
IE.menubar = false
IE.toolbar = false
IE.visible = true
IE.navigate("www.testing.com")
wscript.sleep(8000)
For Each btn In IE.document.getElementsByTagName("button")
If btn.innerText = "Get started now" Then
btn.Click()
End If
Next
Running that script open the website but nothing get clicked.
I think the issue is that it only find one button tag which is "Create New Catalog". I tested it by switching the FOR loop to this code:
Set results = ie.document.all.tags("button")
For Each button In results
WScript.Echo button.innerText
Next
After running this code the only output is "Create New Catalog" which I don't understand why is that. Searching within the "inspect element" of the code show that there is 51 tags in the page, so why would it only find that one and not the other 50 buttons?
Edit 3:
So I think the issue is the fact that document.getElementsByTagName return code from the HTML of the site I'm using but when I click "inspect" to see the code of the button I would like to click the code is whole different than the HTML code (The one that show if I click "view page source").
Can that be the issue? if so how do I fix it?
If someone has an idea how I can achieve my goal in a different programming language - I'm open to suggestions, it doesn't have to be VBscript. Thank you
The Solution for the main question is that:
This code search for buttons with tag that the text on the button is "Get started now". That way you basically do not need button ID or Name.
For Each btn In IE.document.getElementsByTagName("button")
If btn.innerText = "Get started now" Then
btn.Click()
End If
Next
Then I had a different problem which even with that code it didn't worked. So the user SearchAndResQ pointed out that in my case the button was under iframe and in order to access it I need to navigate to the iframe and then look for the button that I want to click.
Thank you SearchAndResQ, JNevill and Lankymart for taking your time to help me.

Access button in div popup watir web-driver

I am trying to retrieve, modify, and reinsert some text in a pop up dialog using watir web-driver. All was going swimmingly until I tried to find a way to click the "Save Book Info" button pictured here: http://i.stack.imgur.com/pGdln.png
However I am unable to find the button. To access the pop up box I gather all the links with the correct name into an array:
#browser.imgs.each do |img| #The links are imgs
if img.title.include?('Edit/Delete Book')
#books << img
end
end
From there I can access the links with #books[index].click. I am able to access and edit the text_fields with:
url = #browser.text_field(:name=>'url').value
... do stuff with url ..
#browser.text_field(:name=>'url').set url
But when I try and find the "Close" button I only get the buttons that are on the main page. After many headaches I managed to find the title of the window I want to work with using #browser.div(:class=>'dijitDialogTitleBar').title, which returns "Edit Book". Success! No. I still can't figure out how to access the buttons on that popup!
If anyone could help me with this I would be most grateful. This is my first time using Watir so it's probably a simple answer...
If more information is needed I'd be happy to supply it. Thanks in advance.
EDIT
Here is the html for the button:
<span id="dijit_form_Button_2_label"
class="dijitReset dijitInline dijitButtonText"
dojoattachpoint="containerNode">Save Book Info</span>
It looks like you have a span tag that is styled to be looked like a button. You need to access it is a span instead of a button.
Try:
#browser.span(:text => 'Save Book Info').click

Resources