I am trying to assert change of class of element. The flow is that I click on a button, then pick something from dropdown that appeared and based on that class of icon changes to picked color, so here after click on element, class 'none' is being changed to 'green'. The problem is that the class is checked before it's changed - when I add cy.wait(500) after click assertion works fine. However I do not want to use implicit wait. How should I approach it? I tried some things like timeout but none seem to work.
cy.contains('.user-info', 'Name Surname').find('component-name i').should('have.class', 'none');
cy.contains('.user-info', 'Name Surname').find('component-name button').click();
cy.get('.flag-dropdown').contains('Green').click();
cy.contains('.user-info', 'Name Surname').find('component-name i').should('have.class', 'green');
You can use a timeout with find something like this:
cy.contains('.user-info', 'Name Surname')
.find('component-name i')
.should('have.class', 'none')
cy.contains('.user-info', 'Name Surname').find('component-name button').click()
cy.get('.flag-dropdown').contains('Green').click()
cy.contains('.user-info', 'Name Surname')
.find('component-name i', {timeout: 5000})
.should('have.class', 'green')
It may be that .should('have.class', 'green') isn't re-checking cy.contains('.user-info', 'Name Surname').
I would try adding the class to the find selector
cy.get('.flag-dropdown').contains('Green').click();
cy.contains('.user-info', 'Name Surname')
.find('component-name i.green') // try specifying class here
.should('have.class', 'green');
Related
Code
Hey guys,
I am new to Cypress and have a hard time finding solution for this problem. The #label element which is a div has a text value and I dont know how to print it to a web console. Appreciate all help
You can do like this:
cy.get('selector')
.find('selector')
.find('selector')
.find('selector')
.eq(0)
.find('selector')
.eq(1)
.find('#label')
.invoke('text')
.then((text) => {
cy.log(text) //logs the text
})
I'm having trouble with clicking on the button that is multiple times on the website and has the same class.
First I need to locate a specific name and click on a button that is on the same line/row.
I tried to implement the bellow but it can find the button.
cy.contains('user2#gmail.com')
.parents('tr')
.find('button')
.click()
For example, I need to locate the name "Agranov Anton" and click on the clock icon next to it. The name changes every time.
The clock icon is the 2nd button, so add .eq(1) to pick that one
cy.contains('user2#gmail.com')
.parents('tr')
.find('button')
.eq(1)
.click()
You can also specify the <tr> element at the first step
cy.contains('tr', 'user2#gmail.com')
.find('button')
.eq(1)
.click()
BUT maybe the clock icon uses an <a> element, if so then use
cy.contains('tr', 'user2#gmail.com')
.find('a')
.eq(1)
.click()
Assuming that the name Agranov Anton is a td element and also the button is the correct selector of the button that you are clicking, you can do something like:
cy.contains('td', 'Agranov Anton')
.parent('tr')
.within(() => {
cy.get('button').click()
})
I am trying to change label text and tool tip for buttons in CKedtior , i changed like to have label text for buttons with default values. Can I change default values to user defined values?
In CKEditor source, buttonview.js states this:
/**
* Label of the button view. It is configurable using the {#link #label label attribute}.
*
* #readonly
* #member {module:ui/view~View} #labelView
*/
After reading this, I tried the following steps which works just fine:
In #ckeditor\ckeditor5-core\src\command.js, add this.set( 'tooltipTitle', '' ); right below this.set( 'isEnabled', false );
In your buttons ui script, for instance #ckeditor\ckeditor5-list\src\listui.js, update buttonView.bind line to include 'label' in arguments of bind and 'tooltipTitle' in arguments of to. Something like buttonView.bind( 'isOn', 'isEnabled', 'label' ).to( command, 'value', 'isEnabled', 'tooltipTitle' );.
In the refresh function of the command script, for instance listcommand.js in the same directory with listui.js, update this.label to whatever you want tooltip to be, this.label = checkConditionsAndGetTooltipLabel();;
I am testing an webview app containing multiple webviews/pages. To get the webviews I do:
$driver.window_handles
which returns me an array of window indexes of numbers something like ['1', '3', '5', '6', '7', '8']
Now if I want to switch to a specific window which contains text "My TITLE"; I have to iterate through each of the indexes in the array using loop and switch the window to that index and then check if the text is present in that window.
Eg:
$driver.switch_to.window('1') if 'My Title' not found; $driver.switch_to.window('3') and so on until I find the window.
I even tried to look for the title of the window/driver; but for some windows I am getting title as nil so wasn't a best way for me to find out the window.
Is there any other way I can try to get the required window?
You can take the below approach:
#create a array with window_id and its corresponding window page title
wnd_titl = driver.window_handles.map do |w|
driver.switch_to.window(w)
[w,driver.title]
end
#required window
win_id = wnd_titl.find { |e1,e2| e2 == 'My TITLE' }.first
driver.switch_to.window(win_id) #switched to the required window
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.