i am trying to click on the icon trash
<div class="form-body">
<div class="infos">
<div class="recap">
<div class="form-actions ">
<a class="btn btn-light btn-icon btn-icon-light" title="download" href=""
target="_blank" rel="noreferrer noopener" download="my_file">
<i class="icon-download"></i>
</a>
<button type="button" class="btn btn-light btn-icon btn-icon-light" title="delete">
<i class="icon-trash">
i have tried
cy.get('i.icon-trash').click()
cy.get(.form-actions .icon-trash').click()
Whatever i am trying i am getting the error:
The element <i.icon-trash> is not visible because its ancestor has position: fixed CSS property and it is overflowed by other elements. How about scrolling to the element with cy.scrollIntoView()?
Fix this problem, or use {force: true} to disable error checking.
scrollIntoView() also is not working.
Does anyone know why this error is happening please?
Thank you
screenshot of the html part above
The button parent of the icon has the click handler, try clicking that
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible') // for good measure, may not require
.click()
but I suspect the problem still persists.
Also try realClick()
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible')
.realClick({ position: "topLeft" }) // try various click positions
You can also try setting a larger viewport at the top of the test.
Other than that try working the CSS - but this is a bit of a hack.
Arguably it's ok because you are testing the click logic not the visibility of the icon (also true for .click({force:true})).
Identify the element with position: fixed for example if it's div.form-actions
cy.get('div.form-actions')
.then($formActions => {
$formActions.css({ position: 'relative' })
})
Related
I want to add an item in cart with a matching text like 'cashews'. I tried below code but .click() function is giving error as "bind and event handler to the click javascript event"
cy.get('.products').find('.product').each(($e1, index, $list) => {
const textveg = $e1.find('h4.product-name').text() {
if (textveg.includes('Cashews')) {
$e1.find('.button').click();
}
}
})
can someone suggest what can be the possible reason that .click() method is not identified by cypress. I am using cypress version 7
How you do this depends on the structure of the HTML.
It looks like you may have this sort of hierarchy
<div class="products">
<div class="product">
<h4 class="product-name">Almonds</h4>
<button>Add to cart</button>
</div>
<div class="product">
<h4 class="product-name">Cashews</h4>
<button>Add to cart</button>
</div>
</div>
Take the product section containing the text you want, and within that find the products <button>.
Your test might be
cy.contains('.product', 'Cashews') // pick the <div class="product"> with required text
.find('button') // inside the product, find it's button
.click()
You can use .filter() to find your element and click it:
cy.get('h4.product-name').filter(':contains("Cashews")').click()
I want to click on the element
cy.visit('https://test.com:1111/')
cy.get('button').click()
cy.contains('Configuration').click()
cy.get('ant-tabs-tab').contains('Blocks').click()
but this element is overlapped by another element with CypressError:
Timed out retrying: cy.click() failed because this element:
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab"> Blocks </div>
is being covered by another element:
<ul class="ant-menu menu ant-menu-dark ant-menu-root ant-menu-horizontal" role="menu" style="line-height: 64px;">...</ul>
Fix this problem, or use {force: true} to disable error checking.
You can use {force: true} with click() to disable error checks:
cy.visit('https://test.com:1111/')
cy.get('button').click({force: true})
cy.contains('Configuration').click({force: true})
cy.get('ant-tabs-tab').contains('Blocks').click({force: true})
Hello I am relatively new to QA automated web testing and I try to use SO as a last resort.
That being said I am having issues selecting a choice from a drop down menu in our web app.
Here is the following code:
<div id="edit-main-user-role-wrapper" class="form-item">
<select id="edit-main-user-role" class="form-select my-dropdown ahah-processed" name="main[user_role]" style="display: none;"></select>
<div class="newListSelected" style="position: static;">
<span class="selectedTxt">
Student
</span>
<ul class="newList" style="top: -136px; height: 136px; left: 0px; display: none;">
<li>
<a class="" href="JavaScript:void(0);"></a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
When I inspect the drop down icon with Firefox inspect element it directs me to this line in the code: span class="selectedTxt"
I have tried accessing the list by id, class, xpath, and css all to no avail.
Here are some of my past attempts:
#browser.div(:class => 'form-item').select_list(:text => 'Student').fire_event ("on click")
#browser.select_list(:xpath, menu).option(:text, option).click
An element with a select tag should only be meaningful if there are elements with option tags nested inside it. Often these pages have a lot of extra javascript in them to give context.
For dropdowns that don't follow the select/option pattern, you want to click on the element that drops down the list, and then click on the element you want that becomes visible as a result.
This is what eventually worked for me:
#browser.span(:class, "selectedTxt").click # to make the list visible
#browser.element(:xpath, "#{xpath}").click # click on the specified xpath
I know this may not be the most elegant answer, but it works!
not sure if you're still looking for answers, but either of these worked for me:
#browser.select_list(:id => "you_leaving_us").option(:text => "Other").select
#browser.select_list(:id => "you_leaving_us").option(:value => "8").select
Instead of li's, I had options. Hope it works
I have set up dropzone with a clickable element. Clicking the button causes dropzone to open the file chooser twice, instead of just once, the second coming immediately after the first file has been chosen.
The init code is:
Dropzone.autoDiscover = false;
$(document).ready(function(){
// Remove the template from the document.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
$("div#photo").dropzone({
url: "/blackhole/",
thumbnailWidth: 240,
thumbnailHeight: 240,
parallelUploads: 1,
maxFiles:1,
maxFilesize: 5,
uploadMultiple: false,
previewTemplate: previewTemplate,
autoProcessQueue: true,
previewsContainer: "#photoPreview",
clickable: ".fileinput-button",
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
});
And the page elements are:
<div class="table table-striped" class="files">
<div id="photo">
<div id="actions" class="row">
<div class="col-lg-7">
<button type="button" class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Choose file...</span>
</button>
</div>
</div>
</div>
<div class="files dropzone-previews" id="photoPreview">
<div id="template" class="file-row">
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button data-dz-remove type="button" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
Strangely, even though I have added code to replace the any existing file with a later one (so only one file can be uploaded), the second file chooser dialog lets me add a second file.
Its like dropzone has been initialized twice, but I checked that it is only initialized once, and also added the autoDiscover = false option for good measure.
Can anyone spot my mistake?
The problem seems to be in how we initialized dropzone:
$("div#photo").dropzone({
...
}
Doing it the non-jquery way solved the problem:
var myDropZone = new Dropzone("#photo",{
...
}
This was on dropzone 3.11.1.
An issue has been created on github/dropzone:
https://github.com/enyo/dropzone/issues/771
This happens for me when more than one dropzone exists on the page with the same class for a browse trigger, it seems that dropzone attaches the event to any element on the page and not just within its own container
In the issue opened for this, maliayas said:
This bug happens when your clickable element is already an
input[type=file]. Dropzone injects another one and now you have two.
Either dropzone should handle this case or documentation should
mention not to use an input[type=file] for the clickable element.
Changing my dropzone element to something other than an input[type=file] fixed the issue for me.
Attach dropzone to the parent, not the input.
In Chrome if you inspect and look at the eventListeners. You will see that once you attach dropzone to your input, you have an additional click eventListener.
Say you have a list of uploads for documents with a child input element.
<li class="upload drag-and-drop">
<input type="file"/>
</li>
Code:
$('input').dropzone();
Will attach an event listener to an already clickable element. So you have 2 event listeners. One from the browser. One from dropzone. Hence 2 dialogs...
If you attach it to the parent:
$('li.upload').dropzone();
You'll now had the listener at the parent. This allows the bubble up behavior to hit the correct element when you drag and drop and not inadvertently effect the input.
My html Code i have a button
<input class="search hidden" id="search_button" type="submit" value="Search" style="display: block;"></input>
when i clicked in Button many items is generated like this :
<div id="search_results" class="" style="display: block; left: 522.083px; top: 459.617px; width: 398px;">
<img alt="Load-circle" class="load-circle" src=".../123">
<div id="app_341446764" class="search-result"><img src=".../DictationIcon.png">abc</div>
<div id="app_561941526" class="search-result"><img src=".../Icon.png">def</div>
</div>
i have many div with class search-result i don't know how to click one of them(class="search-result") anyone suggest me a solution.
Ideally you would add a unique id as #juan-manuel-rodulfo-salcedo suggested. However, if you can't do that then you could find all the divs with class=search-result. Below is an example of how to click the second div on the page:
page.all('.search-result')[1].click
For more examples of how to select multiple elements, see this SO answer.