Watir clicking nested elements inside a container - ruby

I'm trying to complete a happy path e-commerce payment test but I cant seem to click on the nested element for credit card to be honest I'm not entirely sure which is the clickable element.
Any help to get this working would be appreciated.

When inputting forms, you typically want to interact with input and select elements. In this case, you can see that the visible input field is a radio button - ie <input type="radio">.
You access radio buttons using the radio method and select it by using the set method:
browser.radio(id: 'cc-payment').set

The element you want to click is the input with type radio. You should be able to do something like:
driver.find_element(:css, "input[id='cc-payment'][value='creditCard']").click

I'm curious if clicking on the parent item would resolve.
#browser.input(id: 'cc-payment').parent.click
If the div registers the click and sets the input then this might work. You should be able to manually verify this beahviour by clicking outside of the radial and seeing if it selects.

Related

Angular Material md-select load options in async way

I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.

How to select specific radio button in a group of similar radio buttons in Selenium Web Driver?

I am trying to automate a booking process from an airline site.
In the second page of the booking process ('Select Flights'), there are multiple radio buttons which are very similar with other radio buttons available in the page. How can I select the radio button that I want to click?
I have already tried the xpath of the radio button but to no avail.
Here is the html code of the radio button:
Screenshot from booking.airasia.com
Please advise. Thank you
First element
Second Element
Well its true that you are getting similar elements for that given xpath but you also have to go through their siblings/parents etc for different scenarios.
Here is the xpath I tried that identified the individual elements that you were looking for, are depicted above.
//div[#class='iradio_square-green']/input[#id='trip_0_date_0_flight_0_fare_0']/following-sibling::ins
For others radio buttons you just have to change the flight number.
Hope this helps...
:)

How to add data in popup using primefaces and ajax call

I am new in JSF, facing a problem while executing GET AJAX request.
I have a icon with a counter (number), once I will do mouse over to the icon it shows a kind of small popup with small list (3 items), kind of same behavior as we have in Social networking sites (Notification icon). Till here All good. Now in my pop up at bottom side, I added a text says "Show more". This should get 3 more items/ notification from the DB via Ajax call and add the response in the popup (without closing the popup), then in total there should be 6 items.
I am not sure how exactly I can achieve this, Please help.
Using <h:outputText value="show more}"> in my xhtml.
In my bean I have a method to getMoreNotification().
Recently I tried with <p:remoteCommand>, but not sure how I can add responce/ data in popup.
Thanks in advance.
Not that difficult
Create a list which is initially populated with 3 items
Create a <p:overlay> with IN that <p:overlay> e.g. a <p:dataList> that shows these list mentioned in 1. Give this component an id, e.g. 'notifications'
When clicking on the 'show more' commandLink, execute the getMoreNotification() via an actionListener and IN that method update the list mentioned in 1. Also make sure you have an update attribute that contains the value of the <p:dataList>.

Designing and printing a receipt format in flex

I want to design a Receipt in flex.
Which control shall I use to display a table if I want to display some table cells without border? I also want to merge cells in the table just as we used to do in Excel.
Can anyone please give me the code to print the Receipt upon the button click?
I would probable use a List control with a customItemRenderer or a textArea with some fancy text formatting. As for giving you the code, I would be happy to provide input to code you have done or point you in the right direction but cant do your work for you. Best of luck.
Please prepare your receipt layout in flex and just check your layout is proper or not. if it proper then put one button and write down the printjob code on click event of the button. be sure at the time of click event please hide the button till printing is done (means upto send method called)
please refer PrintJob Class of ActionScript for your application to get receipt printing through your flex application.

FoxPro sum form fields

Using autogenerated form from a single database table. The form uses the class WizBtns included in c:\Program Files\Microsoft Visual FoxPro 9\Wizards. The form has Top, Previous, Next and Bottom buttons.
Although the form only has textboxes to enter data for the fields in the table, I have added a custom Text Box from the toolbox which basically intends to display the sum of some fields. I have bound the ControlSource of the text box to a PUBLIC variable costTotal that is created on the form init.
Now the problem is updating the sum of fields in the text box, or simply updating value of costTotal. Where to add the code for this? Adding the code in the form's Refresh method mixes up the value of costTotal, when I press Next button to update all fields with new values, the custom text box displays the sum of the last record which is mysterious.
I would add a method to the form to do the calculation. Then, call that method from the Valid method of each of the textboxes involved in the calculation.
There is nothing wrong with using the refresh event to recalculate the values, just make sure that you call the refresh each time the record changes
If you are using navigation buttons to move between records then the click event of EACH button is an ideal place to issue the refresh request :-
Assuming the textbox is called txtSum and is located on the same form as the navigation buttons then in each buttons click event add this code
dodefualt()
with thisform
.txtSum.refresh()
endwith
Couple of things:
1) do not use the wizards! Make your own base classes. Trying to figure out what the wizard classes do and how to add functionality will take more time that coding your own base classes. Also, the wizard generated code and classes must be at around 10/20 years old, much has changed since then (a polite way to say they suck).
2) Do not EVER use public variables in FoxPro, except for maybe an app object.
If this is a one shot thing, just add default textboxes and buttons and design the form yourself. You will have total control and you will know what each thing does.

Resources