I'm using http://sebuilder.github.io/se-builder/ to generate tests as JSON documents, and https://www.npmjs.org/package/se-interpreter to run them during CI.
I am running into what looks like a WebDriver issue - when I call storeText on a hidden HTML div, then print the representative variable, it is blank. I confirmed this by removing the display: none; css attached to hidden-user-div.
Is there a work-around?
Its working as expected, as Webdriver doesn't interact with hidden elements (which has display property as display: none;).
If you want to make storeText to work, you need to set the display property using JavaScript as below, before executing storeText command:
document.getElementById('hidden-user-div').style.display='inline-block';
Related
I am trying to use Protractor to write end-to-end tests using Protractor. I've run into an issue where I am unable to click on an Angular Material md-tab item and have it load. Instead, when I click on it, I just get a blank area where the tab content should appear.
I found this GitHub issue that provided some CSS that supposedly fixes the problem, but even with the CSS my tab is still not loading. I have tried clicking the tab in the following ways:
element.all(By.css('md-tab-content')).then (tabs)->
#browser.executeScript("#{tabs[1]}.click();")
#browser.actions().click(tabs[1]).perform()
#tabs[1].click()
browser.actions().mouseMove(tabs[1], {x: -20, y: -20}).mouseDown().perform()
All of these methods result in the same hanging issue. The CSS I added based on the GitHub response is:
md-tabs-canvas {
// Keeps IE11 from making `md-pagination-wrapper` as wide as the page.
align-items: inherit;
md-pagination-wrapper {
width: auto !important;
}
}
If I use browser.sleep(5000) and manually click the tab rather than trying to click the tab through protractor, the tab loads perfectly, and the test continues on as expected.
Does anyone know how I can use protractor to click an md-tab element and have it load the content properly?
I click tab items in my e2e tests without any problems using the following
element(by.css('md-tab-item:nth-child(1)')).click();
I got a great solution here. Just do element(by.cssContainingText('.mat-tab-label', "<Tab Name>")).click();
lets say I have a HTML structure like this
<myHandler>
<element_1 ng-controller="..." ng-init="">
content
</element_1>
<element_2 ng-controller="..." ng-init="">
content
</element_2>
</myHandler>
So, my css is saying element_2 has display: none;
how to tell angular not to run on these lements, that are hidden?
and run only (once) when they are visible?
to clarify the case more, the myHandler is handling authorization and is displaying element_1/element_2 depending on the permissions.
so I don't want to initialized element_2 if it has no permissions
Instead of keeping display none ,just keep an attribute ng-if with a flag variable
because if we use ng-if then no element is added into the dom or if no element added then no controller will get instantiated.
<myHandler>
<element_1 ng-controller="..." ng-init="">
content
</element_1>
<sample ng-if="isDisplay">
<element_2 ng-controller="..." ng-init="">
content
</element_2>
</sample>
</myHandler>
I have a pagination list, that is essentially constructed like so (I am using AngularJS):
<span id="latestResultsIndicator">
<ul>
<li ng-click="Item.action()"><span>1</span></li>
<li ng-click="Item.action()"><span>2</span></li>
</ul>
</span>
This works great in HTML, but when I try to write an integration test using Selenium WebDriver and the Fluent API I run into problems.
Specifically I want to click on the second li, to do this I am using the following code
I.Assert.Exists("#latestResultsIndicator");
var secondPageElement = I.Find("#latestResultsIndicator ul li:nth-child(2)");
I.Click(secondPageElement);
This doesn't actually work! If I use jQuery in the Chrome console to do $("#latestResultsIndicator ul li:nth-child(2)").trigger("click") then the second page is selected, so I know the selector is correct.
To test further I added a double click like so:
I.DoubleClick(secondPageElement);
What I noticed here is that the very first li gets selected. Its as if its trying to click or select the wrong one! (See the image).
What is happening?
I know Webdriver has some issues with css pseudo-selectors such as nth-child. You might be able to make it work with Xpath, which is just as fast and just as flexible.
var webDriver = (IWebDriver)I.Provider;
webDriver.FindElement(By.XPath("//*[#id='latestResultsIndicator']//ul//li[2]")).Click();
Not sure if it will work or not, as I have not used FluentAutomation.
The CSS selector as it is written in your question is not correct
"#latestResultsIndicator ul li:nth-child(2)"
The UL has the id you're looking for, so it should be
"ul#latestResultsIndicator li:nth-child(2)"
Not sure whether that is going to solve your problem, but it's a place to start. If not, please update with the results
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}
I have a DNN skin that has some nice containers. I can drop an HTML module onto the page and apply the container to it. I can put a link in the content of the HTML Module, but what I would really like to do is make the whole container/module area a link to another page - in effect as if it were a great big button. How do I do this?
Of course as soon as I posted the question I found a way, but would still be interested to know if this is the "right" way or even a "good" way.
My solution was to take a copy of the container .ascx and add an "onlick" to the outer DIV, which in turn uses JQuery to locate the first tag and to navigate to the href.
<div class="Container-1 Container-1-color1"
onclick="window.location.href = $('a:first',this).attr('href')">
Note: Use window.location.href, not JQuery .click() or .trigger('click') as this creates an infinite loop.
I then added some CSS to show that an action was available when the mouse was over the container:
.Container-1:hover
{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
border:1px solid gray;
}