Content is inside the iframe:
it.only('should verify xyz tooltips',()=>{
cy.visit('/');
cy.get('a[ng-reflect-router-link="abc"]').click();
cy.wait(9000)
cy.get('iframe')
.then( ($iframe) => {
const $body = $iframe.contents().find('body')
cy.wrap($body).find('.content').invoke('attr','style', 'overflow: visible')
//upto here it is working fine
cy.wrap($body).find('div.visTooltip').invoke('attr','style', 'visibility:
visible').invoke('attr','style', 'overflow: visible')
//Below statement is not working
cy.wrap($body).find('div.visTooltip > table.visTooltip__table').should('have.length',1)
})
});
HTML of the page that is not working
I'm successfully able to locate upto div tag using cy.wrap($body).find('div.visTooltip') but after that code is not finding table inside div tag.
I tried setting up css property visibility and overflow to visible but nothing is working.
Can somebody please have a look and suggest something?
Have you tried cypress example on how to use find?
https://docs.cypress.io/api/commands/find.html#Syntax
Example from link above
Get li’s within parent
<ul id="parent">
<li class="first"></li>
<li class="second"></li>
</ul>
// yields [<li class="first"></li>, <li class="second"></li>]
cy.get('#parent').find('li')
Related
I've done the following using Polymer1. Doing the same in Polymer2.0 does not trigger the automatic dropdown menu of the button.
Please could someone tell me what to do. It seems to have to do with Shadow DOM.
In Polymer1, the index.html has dom ='shadow', and a <content> tag instead of <slot>, and it gets to the dReadyDynamicRightMenuReady and triggers the dropdown.
But in Polymer2.0 it also gets to this function, and does not trigger the dropdown.
<!-- this is in my-spxl Polymer2.0 -->
<paper-menu-button class="userMenuPositionClass">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-dropdown-menu class="dropdown-content">
<iron-selector selected="[[choice]]" attr-for-selected="mychoice" role="navigation">
<template id="" is="dom-repeat" items="[[dReadyDynamicRightMenuReady]]" as="menuOption">
<paper-item>... </paper-item>
</template>
</iron-selector>
</paper-dropdown-menu>
</paper-menu-button>
<paper-button class="">
<img on-tap="openRightMenuFromPhoto" src="[[user.photoURL]]">
</paper-button>
Script:
openRightMenuFromPhoto() {
var usersMenuButton = this.$.userMenuIconId;
usersMenuButton.click(function(event) {
dReadyDynamicRightMenuReady = [
{ "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" }
];
return dReadyDynamicRightMenuReady;
})
}
There are few mistakes in your code:
Handle and firing events:
Click listeners is inside a function. That will never be called. Put event listeners on ready() or connectedCallback. For more information about how to do that click here.
Setting property value:
Setting properties value inside function and returning it won't set it. Use
this.property = value and notify the changes. OR, if it is an array/object use polymer array mutation methods.
Read the documentation of paper-menu-button:
Instead of class='dropdown-trigger' use slot as in documentation.
Also, try to create a Minimal, Complete, and Verifiable example.
I have defined kendo tooltip in following way:
<i class="fa fa-info-circle ico-tooltip" kendo-tooltip k-content="model.Description"></i>
Initially the content is ok, but when model.Description is changed and the site is not reloaded the k-content shows the old value.
After reload site by F5 there is new value, but this is not what I want to achieve.
It is possible to somehow refresh this tooltip or workaround this issue?
I had a similar issue and I debugged through Kendo's code and following solution works, in my case I wanted to show only upto 22 characters of text from my model and show full text in the tooltip, here is example code
This sample below is using Angular's 1.5 component
<div kendo-tooltip="$ctrl.selectedItemTooltip" k-content="$ctrl.selectedItemText">{{$ctrl.selectedItemText | limitTo:22}}</div>
and in JS
function fetchFromServer(){
$http.get('/myService').then(function(response){
ctrl.selectedItemText = response.data.model.text;
ctrl.selectedItemTooltip.options.content = ctrl.selectedItemText
ctrl.selectedItemTooltip.refresh();
});
}
in the tooltip options object (when you initialize the tooltip) you set function for the hide event (check documentation ) and in this function you could call refresh function
`
var tooltip = $("#container").kendoTooltip({
hide: function() {
tooltip.refresh();
}
})
`
i think this will do the trick
I'm trying to get an input from user and pass it to second page named other
added a new parameter in state definition called test
You can check the code here
the other looks like this
<li><a ui-sref="other">#/other/fooVal</a></li>
If i try to change it like belowe it just get disabled
<li><a ui-sref="other{{test: 'test1'">#/other/fooVal</a></li>
What should id do to show user input in other page
PS: the other sref works fine
<a ui-sref="other{{test: 'test1'">#/other/fooVal</a>
should be
<a ui-sref="other({test: 'test1'})">#/other/fooVal</a>
Note how it's an object in parenthesis ({ }), not an expression block {{ }}.
I have a list. I want to show the selected object as active. For that I have written the code as below:
HTML
<li ng-class="{'active' : testObject.selected}" >
<a ng-click="showApp()">
<span>App</span>
</a>
</li>
Controller
$scope.testObject = {
selected: false
};
$scope.showApp = function() {
$scope.testObject['selected'] = true;
//my code
}
Here, testObject.selected is a boolean and I am setting its value (true/false) inside showApp() function. It is not working somehow.
There are no issues with your code... I copied it into here a plnkr here:
http://plnkr.co/edit/pjNBHvCnju4zs7QTZ87C?p=preview
Are you sure the class of active has CSS in it that will be reflected in your view?
Have you verified that the class is actually being added to the element or not via the browser dev tools?
If you work with a form, then make sure you have checked your <form> element.
Each required <input> should have binding with a variable via [(ng-model)] (two-way binding is necessary in this case).
I had the same issue and ng-class worked correctly only after these changes.
New to cakephp here.. wondering how i could have a button whilst in my index view to open an add form ( for the same model ). once i submit this form i'd like the modal to disappear and the new record to be show in the index view. I was thinking of putting the add form in a cake element? but not sure how to put this in a modal window. any advice would be great thanks.
What #savedario says makes perfect sense. I blogged about this just before Christmas and have copied the relevant bits below:
View/Users/index.php:
<!-- overlayed element -->
<div id="dialogModal">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
...
<div class="actions">
<ul>
<li>
<?php echo $this->Html->link(__('Add user', true), array("controller"=>"users", "action"=>"add"), array("class"=>"overlay", "title"=>"Add User"));
</li>
</ul>
</div>
...
<script>
$(document).ready(function() {
//prepare the dialog
$( "#dialogModal" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
},
modal: true
});
//respond to click event on anything with 'overlay' class
$(".overlay").click(function(event){
event.preventDefault();
$('#contentWrap').load($(this).attr("href")); //load content from href of link
$('#dialogModal').dialog('option', 'title', $(this).attr("title")); //make dialog title that of link
$('#dialogModal').dialog('open'); //open the dialog
});
});
</script>
Views/Users/add.ctp:
echo $this->Form->create('User');
echo $this->Form->input('name');
echo $this->Js->submit('Save', array( //create 'ajax' save button
'update' => '#contentWrap' //id of DOM element to update with selector
));
if (false != $saved){ //will only be true if saved OK in controller from ajax save above
echo "<script>
$('#dialogModal').dialog('close'); //close containing dialog
location.reload(); //if you want to reload parent page to show updated user
</script>";
}
echo $this->Form->end();
echo $this->Js->writeBuffer(); //assuming this view is rendered without the default layout, make sure you write out the JS buffer at the bottom of the page
Controllers/UsersController.php:
function add() {
...
$this->set('saved', false); //false by default - controls closure of overlay in which this is opened
if (!empty($this->request->data)) {
$this->User->create();
if ($this->User->save($this->request->data)){
$this->set('saved', true); //only set true if data saves OK
}
}
...
}
You'll need to have included JQuery 1.9+ and JQuery UI js files in the layout used by your index.ctp and add.ctp.
Actually I have now switched to Bootstrap modals in my own code because I think they look nicer but the approach is very similar.
CakePHP does not have a built-in functionality to do what you want.
Using Elements here does not necessarily help, unless you find yourself writing the same code in different places...
I could not find anything already written to handle this, so I wrote my own javascript functions that work but I doubt could be used as a plugin.
To explain the whole thing would be a bit too long here.
I suggest you start looking at Jquery UI Dialog.
Your index view will need an 'onclick' on the 'add' action button to open the dialog.
The content of the dialog itself could come from the same add() action you would normally use, loaded via an ajax call.
I used bootstrap 3 for my cakephp project which included modals, but that may be overkill for your project.
You have to use bootstrap or jquery to do this. CakePHP does not have a built-in functionality to do what you want.
Typo
<div class="contentWrap"></div>
must be
<div id="contentWrap"></div>
or
$('#contentWrap').load($(this).attr("href"));
must be
$('.contentWrap').load($(this).attr("href"));