I want to embed a HTML file inside of my electron app. I chose to use iframe, however - when I do this - it seems like I can no longer use node.js. Any attempt at using require("electron") will show that require is not defined. Any ideas?
Thanks in advance!
Stijn
if you don't mind a late answer, you should probably use a <webview>, as it gives you a more fine grained control on what you need.
If, however, you really need to use an <iframe>, you have two choices:
use parent.require (parent accesses the iframe parent, which should be your window)
on the load event, copy the parent window's require to the iframe one:
iframe.onload = function () {
const iframeWin = iframe.contentWindow
iframeWin.require = window.require
})
The only "downside" is that your included packages will be accessing the main window DOM instead of the iframe's one, which means that none of the iframe window global variables will exist and, more importantly, document will access the window DOM (querySelector and getElemementBy methods won't really work). Whether this is a problem for you depends on how you organise your code, so good luck there
Related
For example I've written a code to access a global variable of a web page and access values from it and then I want to put that value in some HTML div of that page. Now I can copy and paste this code into browser console and it will work.
But instead of pasting it in console, is there any way I can run my own server (localhost) using NodeJS and do the same from there? I mean communicate to the browser and that page which is open?
If yes, what things will I need?
I would use selenium-webdriver
It takes a bit of setup, but afterwards it's pretty easy
go here and click on the folder just above the one that says 'icons' (this should be the latest version of chrome webdriver)
Then, once you download the latest version, drag the exe C:\WINDOWS (if you're not on windows just move it to any folder on the PATH environment variable
now that you've done that, set up a simple script like this:
const webdriver = require('selenium-webdriver')
let driver = new webdriver.Builder().forBrowser('chrome').build();
(async function example() {
await driver.get('http://example.com/')
await driver.executeScript('/* your code, for example: */ document.getElementsByTagName(\'h1\')[0].innerHTML = \'test\'; console.log(\'test\')')
}())
make sure to escape (but a backslash before) any single quotes in your driver.executeScript
I would recommend learning a bit about selenium-webdrivers api so that you can to more complicated things (such as running this without actually opening a new window). I would also that you use selenium-webdriver's api (which allows you to edit webpages, click things, input keys, etc.) instead of just putting everything in an executeScript as much as you can.
i am working on a progress, but it always crashes when i use the HTML spy. the reason i found out is that the iframe is changing. Is there a way to make it dynamic, so it reads and gets the iframe. so that i can add it into a dataitem and add it into the dynamic spy.
1 time it runs : /HTML/BODY(1)/DIV(6)/DIV(1)/IFRAME(2)/HTML/BODY(1)/DIV(1)/DIV(3)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/TABLE(1)/TBODY(1)/TR(1)/TD(1)
2 time:
/HTML/BODY(1)/DIV(6)/DIV(1)/IFRAME(5)/HTML/BODY(1)/DIV(1)/DIV(3)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/TABLE(1)/TBODY(1)/TR(1)/TD(1)
3 time: /HTML/BODY(1)/DIV(6)/DIV(1)/IFRAME(3)/HTML/BODY(1)/DIV(1)/DIV(3)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/DIV(2)/DIV(1)/TABLE(1)/TBODY(1)/TR(1)/TD(1)
Spy the iFrame if possible, capture the path in a variable,
use Dynamic path for all elements by prefixing it with the iFrame Path.
if this does not work let me know and I can give you another option.
I am trying to build out a harness for a page so that we can write tests against it. What I would like to be able to do is use a CSS selector to find the given element or elements instead of manually modifying the SearchProperties or FilterProperties.For a web test the CSS Selector seems far more intuitive then the SearchProperties do. Is there some mechanism for doing this that I am simply not seeing?
Try this...
https://github.com/rpearsondev/CodedUI.jQueryExtensions/
It adds extension methods to the BrowserWindow object...
var example1 = browser.JQuerySelect<HtmlHyperlink>('a.class1');
var example2 = browser.JQuerySelect<HtmlListItem>('li.class2');
However, I will let you know I'm having issues with it complaining about casting errors regularly.
Try browserWindow.executeJavascript if you return a control you found via css/xpath it returns the relevant uiControl object
const string javascript = "document.querySelector('{0}');";
var bw = BrowserWindow.Launch(new Uri("http://rawstack.azurewebsites.net"));
string selector = "[ng-model='filterOptions.filterText']";
var control = bw.ExecuteScript(string.Format(javascript,selector));
HtmlEdit filter= control as HtmlEdit;
filter.Text = "Alien";
As sjdirect noted, the jQuery extensions are probably the way to go if you want to use those type of selectors.
However, it seems that you may be interested in some abstraction that doesn't require directly setting search / filter properties on the UITestControl objects.
There are good abstractions that do not use the same selectors as jQuery, but provide a readable, consistent approach for finding elements in the page and interacting with them.
I would recommend also looking into Code First and CodedUI Fluent (I wrote the fluent extensions) or even CodedUI Enhanced (CUITe).
These provide query support for that looks like (from CUITe):
// Launch the web browser and navigate to the homepage
BrowserWindowUnderTest browserWindow = BrowserWindowUnderTest.Launch("https://website.com");
// Enter the first name
browserWindow.Find<HtmlEdit>(By.Id("FirstName")).Text = "John";
// Enter the last name
browserWindow.Find<HtmlPassword>(By.Id("LastName")).Text ="Doe";
// Click the Save button
browserWindow.Find<HtmlInputButton>(By.Id("Save")).Click();
I am writing a chrome extension that is a 'content script'
I want to inject a google map on to a webpage.
Problem:
It appears that i have no way to add functions on to the window object, thus i cannot define a callback function for googlemaps to call when it loads.
How do people usually go about mucking with the window?
--
someone on the interwebs suggested i do this:
You can do this easily with a JavaScript URL: window.location =
"javascript:obj.funcvar = function() {}; void(0);"
but when i did this i got an access denied error. it seems like a lot of search results about this problem are outdated.
Content scripts have a separate JavaScript execution ennvironment from the page they run on, so they cannot alter JS variables in the page itself. However, the content script shares the DOM with the page, so you can inject a <script> tag into the DOM which will be loaded and run in the actual page's execution environment.
I was wondering if it is possible to create a new XUL component via any available api, such as XPCOM or NPAPI, so we can use it our XUL files.
Let's say I wanted to clone the XULs vbox's components code and add a few modifications to it, so we could use our custom XUL component just like this:
<window>
<myvbox mycustomarg1="customValue"> Some content... </myvbox>
</window>
I know what XBL is and what is used for and it doesn't fit our need.
Any suggestion of how to achieve that?
Edit:
We need to create a browser component in Firefox as child of another browser object. The problem is some websites detect this child browser as iframe and we want to avoid this.
Thanks.
If the point is preventing a webpage loaded into a frame from messing with your XUL document then you should use <browser type="content"> - this establishes a security boundary between chrome and content which (among other things) prevents the content document from accessing its parent frame. It is important however that your XUL document itself is loaded as chrome and not content (by either being on top level or inside <browser type="chrome">). See https://developer.mozilla.org/en/XUL/Attribute/browser.type for documentation.