The HTML looks like this
<div class="fd-segmented-button">
<span> Question Text</span>
<div>
<div class="fd-segmented-button-14-fd-segmented-button", id="CH_YES">
<input type="radio", name="path1_1">
<label class="fd-segmented-button-label", id="CH_YES">
::before
"Yes"
</label></div>
</div>
I am now trying to see if the Yes button is checked or selected
I am able to reach to the button by this path but since ::Before is used to identify it as selected how do I check with Cypress
Tried using
cy.xpath(//*[contains#class,'fd-segmented-button')]/span[contains(text(),"Question Text")]/..//label[contains(text(),"Yes")]).should('be.checked')
but it is not verifying it
Related
I have been stumped on this for a couple hours and can not figure a way around it.
Larvel 8 with Livewire
I have a very basic form.
<form action="/dashboard/payment" method="POST">
#csrf
<button type="submit" class="btn btn-primary my-3 w-100" id="checkout-button">
<span wire:loading>Please Wait</span>
<span wire:loading.remove>Pay - $
<span>100</span>
<br>
<small>Description of payment</small>
</span>
</button>
</form>
But the form tag itself it is not rendering the html. It is only rendering the button inside.
When incrementing a value with another button, the form tag is then rendered into html and the button can be used as expected.
The incrementing button only ++ to a value and updates the database with the new value.
This is the only thing holding me back, I have searched everywhere but cant find any information about form tags not rendering.
Note: Neither the opening tag or the closing tag is rendered until the other button is pressed.
Any ideas or information would be fantastic and greatly appreciated.
I am trying to build a form that upload multiple images. below is my code
<form method="post" action="{{ route('addproduct') }}" enctype="multipart/form-data">
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" name="image[]" multiple>
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="row mt-4">
<div class="row" id="preview_img">
</div>
<button type="submit>Submit</button>
</form>
and on the server side I do
dd($request->image);
The problem is, if I click the input field and select more than one file using shift/ctrl click and upload, it works fine uploading all the selected files but if say I click on the browse and select one file and then again click on browse and select one more file and repeat, it just keep the last file selected.
If that is how it is suppose to work then is there a way to make it work the way I want where user can select multiple files using browse button multiple times because the files user want to upload might not be in the same folder so he/she might want to browse multiple times to select all files they want to upload.
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
I have following html code. And I want to using Ruby Mechanize select dropdown element wit specific text (I want to click on it). Example Chinese. My question is how to do this? I am new in Mechanize.
<form class="form-inline search search-large" action="/translate" method="get">
<input id="q" name="q" type="text" placeholder="Search" class="input-large" value="" autofocus="autofocus" data-pons-redirect-input="true" data-pons-autofocus="true" autocomplete="off">
<div class="btn-group source open" data-pons-lang="de">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">
<span class="text">Chinese</span>
<i class="icon-angle-down"></i>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" class="language">
<span class="text">Chinese</span>
<span class="flag flag_zh"></span>
</a>
</li>
<li>
<a href="#" class="language">
<span class="text">Elvish</span>
<span class="flag flag_lb"></span>
</a>
</li>
</ul>
</div>
</form>
Bad News
As far as I see, your example page is too involved to let mechanize interface it with e.g. a .click method. Actually it will be able to follow the links (""), but I guess this will not help you much, because it seems there is some javascript or other black magic involved.
You can try first to see if the page will work nicely (not guaranteed) with mechanize by disabling JavaScript in your browser.
Good News
Anyway, at the end you will want mechanize to do certain kinds of HTTP requests - triggered by JS or not does not matter. That you will be able to do with mechanize (although it might not necessarily be the best choice for all scenarios).
Tips
I encourage you to use your browsers developer thing (often fired up by pressing F12) and see what is really happening, e.g. which form gets submitted with which values. And don't forget to check if its the same when used with and without javascript (mechanize will not execute JavaScript as far as i know).
Also, when developing your mechanize code, use irb or another repl like pry to try your code live. Your mechanize agent or page will have a method save or save_as or similar with which you can always save the current page and review it in your browser or favorite text editor. And remember _ in irb gives you your last return value.
Inside a tab, I have a few radio buttons and a div. When clicking on a button, I replace the div by a specific content in Ajax. It works fine. What I want to do really is to navigate inside the tab, ie from within the div click a link that will change the content of the main tab div and eventually use the history to go pack to the previous page inside the tab.
Is it doable? Any clue where to look?
TIA,
JF
I am using jQuery Ui tabs. Navigating from one tab to another works fine (and history with it. Inside the tabs I have several buttons, once clicked, it changes a div content inside the tab itself.
<div id="tabs-10">
<div id="acQual" class="accordion"> <!-- Catalogue -->
<h3>Verres</h3>
<center>
<div>
<form>
<div class="radiobouton"> <!-- barre de boutons -->
<input type="radio" id="radiov1" name="radio" onclick="shows('resVerresSimples','scripts/getcat.asp','q','1')" /><label for="radiov1">Verres Simples</label>
<input type="radio" id="radiov2" name="radio" onclick="shows('resVerresSimples','scripts/getcat.asp','q','2')" /><label for="radiov2">Verres Spéciaux</label>
<input type="radio" id="radiov3" name="radio" onclick="shows('resVerresSimples','scripts/getcat.asp','q','3')" /><label for="radiov3">Verres Feuilletés</label>
</div>
</form>
<br>
<div id="resVerresSimples"><img src="images/browser.png"></div>
</center>
My problem is that inside my getcat.asp, I have links that I want to open in the resVerresSimples div...