So I am struggling to get this simple thing done
I need to read the width of a dom element as soon as my app starts and set it as the width of another element.
Basically its like this I have some Tabs which are nothing but a bunch of div elements. A selected tab will have an underline for which I am using a span to get the underline done. My question is how can I read the width of a particular dom element as soon as the dom loads and then set the width of the another element
I believe the proper approach to that would be to use Flags. In that case, you use JavaScript to read the DOM, parse the information and then send it to the Elm app via Flags:
var app = Elm.Main.init({
node: document.getElementById('elm'),
flags: document.getElementById('my-other-element').offfsetWidth,
});
Related
I have a dashboard built using dojo dijits. One of the dijit is dojo calendar widget.
In this dashboard I am embedding an iframe to it. I want to change the value of the calendar widget from within the iframe.
The issue is since it is not just about changing the text value in the input box of calendar dijit it is also about calling the on change event. So I am using the following
dijit.byId('dijit_form_DateTextBox_1').set('value', datFrom);
This way the value gets updated as well as the change event is fired.
Now since I want to do this from within the iframe I need to get reference to calendar dijit in parent HTML page.
If this is a simple Javascript I would have used following to get to that DOM Element and change the value.
const targetNode = $('#'+divId, window.parent.document)[0];
But since this is dojo so I am unable to get this as a dijit object. Is there a way to get dijit from Parent page
Since the dataTextBox is inside iframe, it's in different scope, and looks like you are not using dojo in AMD pattern.
What you could do is get the object from iFrame's contentWidow and call byID() like any other function, example
var _dijit = document.getElementById("iframeId").contentWindow.dijit;
var dateTextBox = _dijit.byId('dijit_form_DateTextBox_1');
dateTextBox.set('value', datFrom);
or better is, you just call a global reference your own function rather than taking reference of dijit.
I'm trying to wait till the preloader appears on the website for that I'm using ExpectedConditions.invisibilityOfElementLocated but initially when I was locating preloader through the class name "DarkBg", the explicit wait didn't wait for the preloader to get invisible but later when I located through Id then the explicit wait worked and waited till the loader disappeared.
I've attached the loader image along with its source code. I want to know why the explicit wait through classname locator didn't work?
While using ExpectedConditions invisibilityOfElementLocated() with the classname DarkBg, the element seems to be a <div> node which seems to be the parent of the actual overlay in the form of the <img> node. This <div> node includes only the style height and may be either bigger then the Viewport (or out of the Viewport) and can be the possible reason behind Selenium unable to interact with it:
Where as the <img> tag seems to be have all the required style attributes present to be within the Viewport and interactable in the form of width, height, top, etc.
Hence Selenium easily detects it.
I have this problem where I have to validate if a loading spinner is present, it's present for about 1 second on the page, i have found the xpath selector of the loading spinner but selenium library could not find it is there another way to find out a selector of something that dissapears after a short while? Note: The xpath is definitely correct. There is no id on the loading spinner either.
This is the code i have tried
Validate Loading Spinner
Wait until page contains xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
I have also tried Element should contain and Page should contain but that does not find the locator.
You should be using one of the keywords that is validating an element is present - Wait Until Element Is Visible, or Wait Until Page Contains Element - both of which support a timeout argument, for how much to wait.
Afterwards, you'd better use the opposite keyword - Wait Until Element Is Not Visible, to make sure the spinner disappears and you can continue with the test.
There is a problem with your locator - xpath has some issues if the element is svg, most of the times it can't address it directly. So instead of specifying it explicitly in the path, look for a node whose name happens to be "svg"; e.g.:
xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/*[local-name() = "svg"]
(^ changed the last element in the path)
Slightly offtopic - try to have less rigid locators - this one specifies an absolute path from the element with id "app" and down (a div child, then its first div child, then that one's third div child, and so on and so forth). If the element structure changes even slightly, the locator will stop working (say, in a bug fix, or re-positioning it, or just with using a HF of an JS library).
Try to find an element that's 1-2 levels higher than your target svg - by a solid class value, or structure that's unique, and use it as an anchor.
I reckon you used wrong keyword
Validate Loading Spinner
Wait until page contains ELEMENT xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
Both work:
Validate Loading Spinner
wait until page contains element xpath=//*
[#id="app"]/div/div[1]/div[3]/div/div/div/div/*[local-name() = "svg"]
and
Wait until page contains ELEMENT xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
I had a very similar issue
How do I remove a splitter from a dijit tabContainer programmatically?
I have the layout which includes the tabContainer written decoratively in the mark up like so http://jsfiddle.net/kagant15/4o0sfdzd/
I need a js solution that will allow me to remove the an existing splitter,
I've tried the following:
tabContainer.set({splitter : false});
and despite seeing the value set as false after inspecting the element I can still see and use the splitter in the web browser.
Thanks in advance for any help
I see you are talking about removing the splitter from a child of a BorderContainer. It doesn't matter if the child is a TabContainer or some other widget.
Unfortunately the splitter property is const so it's not as simple as tabContainer.set({splitter : false});.
But I think you can do it by calling myBorderContainer.removeChild(tabContainer), then set tabContainer.splitter to false, and finally myBorderContainer.addChild(tabContainer).
If the layout changes after the removeChild()/addChild() you will need to specify a position to addChild(), or specify layoutPriority on all your BorderContainer children.
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});