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();
Related
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
I create simple application with window and 3 field:
Fiddle Link (Use Chrome)
When I enter a value in the field, it looks fine.
But when I change the focus,text in field moves down.
All fields work similarly.
After click on trigger (if field has it) text looks fine.
This bug only in Chrome.
IE, Opera, Firefox and Vivaldi work right.
How can I fix that?
It's a known bug for chrome. Take a look here for the workaround:
https://www.sencha.com/forum/showthread.php?301227-Visual-combobox-bug-in-Chrome-43.0.2357.65-m&p=1101244&viewfull=1#post1101244
Css fix:
.x-form-text { display: inline; }
Demo here: http://ext4all.com/post/extjs-5-textfield-chrome-bug-fix.html
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';
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;
}