Checking for text on submit button in Capybara

I need to verify the presence of a submit button with specific text on the page.

For example, the HTML code for the button is:

<input class="button" type="submit" value="Continue" tabindex="3"
name="nav[save]"></input>

My attempt at verification:

  it "should display the Continue button" do
    expect(page.find('input[type="submit"]').find('input[value="Continue"]')).to be_truthy
  end

However, I am encountering the following error:

Error: Unable to find css selector "input[value=\"Continue\"]"

I also tried:

expect(page.find('input[type="submit"]')).
  to have_selector('input[value="Continue"]')

But this resulted in:

Error: Expected to find css selector "input[value=\"Continue\"]" but no matches were found.

Answer №1

To verify both conditions, you can use a single CSS selector:

input[type=\"submit\"][value=\"Continue\"]

Answer №2

If you're looking for a solution that aligns with your perspective, consider this:

verify(find('.button').text).equals('Continue')

See the result in the command line interface:

[1] pry(#<Cucumber::Rails::World>)> verify(find('.button').text).equals('Continue')
=> true

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show pictures side by side within bootstrap column

Using the new Bootstrap 4 alpha 6, I am attempting to showcase three images side by side. <div class="row"> <div class="col-md-4 text"> <p>including some descriptive text.</p> </div> <div class="col-md-8 screens"> ...

Is the confirmation window not showing up on the active tab in Chrome Extension? It only seems to appear on the popup.html tab

I have created a Chrome extension for an e-gym that is designed to prompt a confirm window after every hour of using the Chrome browser. The issue I am facing is that the confirm window only appears on popup.html. I want to activate my extension so that it ...

Utilizing CSS background sizing with jQuery for stunning website aesthetics

In my HTML file, there is a main div container with two nested divs inside it. Each of these inner divs has been assigned separate ids for content placement. By implementing a functionality that changes the background image of the parent div upon clicking ...

Choosing a radio button in Selenium that has similar attributes

I am experiencing difficulty with the two radio buttons as they have similar attributes and I am unable to find the correct combination of xpath attributes that work. Can someone please assist me? Below is the HTML code: Radio Button 1: <label class=" ...

Is there a way to utilize JQuery to swap out a CSS background image while preserving the gradient effect?

Currently, I am facing a challenge in dynamically updating the background-image property of a div while preserving other background-related properties (such as color and gradient) using jQuery's .css() function. Although I can successfully replace the ...

Is there a method to track the progress of webpage loading?

I am working on a website built with static HTML pages. My goal is to implement a full-screen loading status complete with a progress bar that indicates the page's load progress, including all images and external assets. Once the page has fully loaded ...

Unable to access file on Selenium IDE

My role at the company involves testing our online software using Selenium IDE on Firefox. Lately, I've been experiencing an issue when trying to open a file. After clicking the 'File' tab and then selecting 'Open' from the menu, ...

Discover the possibilities of setting the dimensions of your anchor tags using only inline-block spans

Can anyone help me understand what is happening with this small piece of HTML code? http://jsbin.com/akome5 When viewed on various browsers such as FF4, Chrome10, IE9, IE8, Opera 11, the layout of the element appears like this: Hmm, why is this happenin ...

What is a simple way to center a box on a page without relying on margins?

I'm attempting to position a box in the center of the page without relying on margin. Here's what I've tried so far: .box-middle { vertical-align:middle; height:100px; width:100px; border:1px solid #ddd; } This approach h ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

I have an inquiry that requires me to delay until specific requirements are met, using selenium

While using selenium for web crawling, I am facing an issue where if there are more than 5 open Chrome browser windows, the program needs to wait. On the other hand, if there are less than 5 windows, the program should continue crawling. Unfortunately, I ...

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

Ways to verify element visibility using WebDriver - combating everlasting loading

Currently, I am in the process of testing a button that is designed to close a window. After clicking on the button, my goal is to verify whether the window has closed successfully. To achieve this, I have come up with the following method: public bool ...

Is it possible for a CSS Transition/Transform to ease out smoothly yet not ease in at all?

It appears that the transition is smoother when I stop hovering over the button, compared to when I actually hover. Why might this be? .button_1 { border-width: 0.8px; border-color: Lightgray; background-color: hsla(209, 72%, 59%, 0.85); ...

The values from the form fields are not being properly transferred into the JSON object

Check out my JSFiddle here: https://jsfiddle.net/inchrvndr/7pwh9p8g/ When you click the "+" button, the bordered form elements are getting cloned. All the values of the cloned form elements are being passed into JSON data except for the parent element fr ...

Tips for recognizing and selecting a button that has dynamic id and xpath

There are multiple products displayed on a page with the option to 'add to cart' for each product. Since the products displayed are dynamic and their xpaths/ids keep changing, I am looking for a way to locate and add a specific product to the ca ...

Preserving the original height of an element while its content undergoes modification

I have a unique image display setup where the main image is shown in full size to the left, while all other gallery images are displayed as thumbnails to the right. Here's how it's structured: <div class='col-md-7'> <img s ...

The changes I make to my CSS file are not reflected on my website

Here's my issue: I had an HTML file and an external CSS file, both successfully linked. Changes I made in the CSS file were reflected on the website until suddenly they weren't. I tried commenting out code, refreshing the page, restarting the se ...

Having some issues with duplicating certain elements in Selenium IDE

This is my first time seeking help with a question! (Nervous and excited at the same time!!) Unfortunately, I lack the required reputations to share an image... I am currently attempting to use selenium in order to automatically upload an image and retri ...