Protractor test if modal is visible - javascript

I am attempting to Protractor test whether a bootstrap modal window to confirm a records deletion is currently visible.
The record to delete appears in an angular ng-repeat, so I have to activate the delete button from there.
If I test for isPresent the test always passes true because it is looking in the DOM for the modal window, and it will always be there. However testing for isDisplayed always returns false when I expect true.
Here's some code...
// Use the .all repeater to search the array of presented records
element.all(by.repeater('entries in presentData')).then(function(presentData) {
// get the first record and open the options menu
presentData[0].element(by.css('.dropdown-toggle')).click();
// In that first record click the delete button
presentData[0].element(by.css('.delete-link')).click();
browser.waitForAngular();
// Remove the 'fade' class from the Bootstrap modal, I heard animations can cause some issues for testing
browser.executeScript("$('.modal').removeClass('fade');");
// Expect that the .modal-dialog is true
expect(element(by.className('modal-dialog')).isDisplayed()).toBe(true);
});
I have tried all kinds of combinations of various other stackoverflow and github questions, but nothing is working for me so far.
Any light you might be able to shed would be much appreciated!

Turning the comment into an answer.
If adding browser.sleep(5000) before the last expect works then is a timing issue, you may need to incorporate active wait as explained here which is including the waitReady.js script, adding a require('./waitReady.js'); in your onPrepare block then replace the last expect with:
var elm = element(by.className('modal-dialog');
expect(elm.waitReady()).toBeTruthy();
That expect will wait for the element to be present and then will wait for it to be visible.
Using the waitReady.js script will save you from using sleep in those cases.
You may also try another browser.waitForAngular(); right after the browser.executeScript and hope Protractor knows how to wait for that JS injection.

Related

How to get updated DOM after using checkboxes?

I know that the title of asking is quite vague. But let's check this page:
https://www.cleaneye.go.kr/user/gongsiCompare.do
So this is one of public data page in Korea which has a data I need in my research.
As you can see, it has some checkbox in ul, and if you check one of the box in left one, the list of checkbox on its right would come up.
So I made a code to check every combinations, and I'll show you the one which cause the problem.
from selenium import webdriver
driver = webdriver.Chrome(CHROMEDRIVER_LOCATION)
driver.get('https://www.cleaneye.go.kr/user/gongsiCompare.do')
in_type = driver.find_elements_by_xpath("//div[#id='divPcomp']/ul/li")
for in_t in in_type:
in_t.find_element_by_xpath("./label/input").click()
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li")
for r_t in region_type:
r_t.find_element_by_xpath("./label/input").click()
The problem is, when the code execute
r_t.find_element_by_xpath("./label/input").click()
it gives ElementNotInteractableException error, maybe cuz DOM didn't revised after it clicked the checkbox in
in_t.find_element_by_xpath("./label/input").click()
So I've searched how to solve this problem, and most of answers were about using implicit/explicit wait. Before I do that, I put time.wait(30) between click()s, and still it didn't work. So just waiting might not be the solution for this.
As you can see, if you refresh it, the whole page would be reset so... that is not the answer for this as well.
Is there any great solution, or any walk-around it, please enlighten me.
Otherwise, I'll just use mouseclick and keyboard inputting 'tab' haha...
Thanks for your attention to this problem!
your locator is not unique, it finds element that is not visible on screen use :
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li[#class='rowon']")

window.onSelection() in Template.myTemplate.onRenderd() in blaze

I have a template (blogContent.html) which loads the text on the page using helpers in (blogContent.js). Once the page has loaded, I'm trying to select some text on blogContent.html and highlight it.
To get the selected text, I'm trying to do something like this
Template.blogContent.onRendered(function(){
if (window.onSelection) {
var selectedText = window.onSelection().toString();
console.log(selectedText);
}
});
However, I'm encountering two issues with it.
1. The if block is always executed when the page is loaded and never afterwards i.e. not when I selected some text.
2. Because of (1), console.log outputs a null string on client console only once when the page loads and nothing heppens afterwards.
Any pointers are much appreciated. I'm new to webdev and meteor. Thanks a lot.
window.onSelection is not a valid function or property. You may be thinking of window.getSelection().
Meteor doesn't re-render the template unless the data inside of it changes, so the onRendered function won't be called.
What you want here is plain old jQuery -- see this question for how to create a listener for text selection.

AmStockChart panel title identification

I would like to growl the title of the stockPanel being removed on clicking the allowTurnOff button
I am using the below Listener but it is not working. How does amStockChart register the panel which needs to be removed on clicking a certain panels allowturnOff button
addListener('panelRemoved' , 'function(event) {
growl(event.chart.panels.title);
}'),
Actually you may ignore the syntax around the quotes as I am using the charting library through R but the concept remains the same.
Let me elaborate the situation. I have multiple panels with allowTurnOff buttons. I want to trigger an action based on which panel the user decides to remove. Hence I am using the panelRemoved event where the program should message me which one of the panels (either in terms of Index or Panel Title) was removed by the user.
The below works:
addListener('panelRemoved' , 'function(event) {
alert(event.chart.panels.length);
}')
PS: Replacing growl() function by alert for convenience.
The above code correctly calls out the number of panels in my chart but what I want is the title of the panel that was removed. I can definitely provide the code in R which is similar but not exactly like JS.
I am assuming there will be a loop which will run through all the panels in event.chart.panels.length and check which one of the panels was removed and then throw out something like event.chart.panels[x].title I guess.
addListener(panelRemoved,function(event){
for ( var i = 0; i < event.chart.panels.length; i++ ) {
if event.chart.panels[i].removePanel.enabled==true {
alert(event.chart.panels[i].title);
} else {
return();
}
})
Please let me know if you would still need the R Code
# Sagar: Since my code is in R and not in JS, I am unable to share in Fiddle. But I can make a good attempt to explain the series of steps involved. As follows:I have an amStockChart with multi-panel.I have set the stockpanel property allowTurnOff = TRUE. Now you will find that a small remove panel button appears on the top right of each panel. Now if a user tries to remove a given panel using that small little button on top of each panel, the event=removePanel gets triggered. I will use the addListener to catch this event and execute some logic. In that logic, all I am trying to do is alert as follows "Panelx is successfully removed". So to do that, I need to know which panel did the actually close. I want help building that logic which will identify which panel the user closed within the addListener(event=removePanel) and then throw out the alert. Ideally I would like the logic to throw out the title of the panel which was removed by the user

JQuery extension - Youtube playlist - selecting checkbox not recognized as manual click

I'm trying to get some feel for JQuery etc.
Currently, my aim is to write a simple browser extension that selects all "deleted videos" in a playlist and removes them.
The selection is going fine, also works with the alternative commented lines:
var allVideos = $(".playlist-video-item.hidden");
alert("Nbr of deleted videos to remove: " + allVideos.length);
jQuery.each(allVideos, function(){
//$(this).find(":checkbox").attr("checked", true)[0].onclick();
//$(this).find(":checkbox").click();
$(this).find(":checkbox").trigger('click');
});
$("#playlist-edit-actions").click(); // button not editable??
However, even though some videos are "checked", the Actions button on top remains disabled. Only when I add another click manually, it becomes editable.
The solution is probably simple? I've looked around a bit for simulating native clicks but didn't see an immediate answer.
Regards.

Why filter and paging are not working together

I have a function which has to filter and display the result by pages. On document ready everything seems fine. The items are separated by pages. If I click on checkbox or date it is filtering elements as I want, so it's working too. But the problem is that when the function filter items a new pagination is not creating. For example: I have 28 items. They display 3 pages - 10items/page. If I filter and the filter result is 12 items the function doesn't make 2 pages: 10 items on first and 2 on second ... but everything is on the first page and the number of pages are not changing. This is my code:
jsFiddle
I was trying to make the 'click' function 'live' like this:
$('label.check, .calendar a').live('click', function(){
//the code
})
but I don't know why it is not working and it is braking.
I also tried to replace this match-es:
var pages = Math.ceil(match.length/page);
and
match.slice(first_item, last_item).show();
with $('.widget.left:visible') but it still didn't work.
So why is live not working? I think if it does, and give my match a live result, the rest will work but ... Can someone help?
edit: I don't know but my js doesn't run in the jsfiddle. I've tried both jsfiddle and jsbin but still doesn't. Sorry for that I don't know how to fix it but the code runs for sure. It is copy/pasted.
You said :
but everything is on the first page and the number of pages are not
changing.
Because in your JSBin $ is not defined. It means that JQuery is not defined, all others library also BTW.
I quickly add JQuery and JQuery UI, it is working the first time (when I click on americana for example). After it seems freezed. As I don't have all your dependencies, I stopped the debugging.
http://jsbin.com/oqufun/4/edit

Categories