Execute a selenium script in javascript on button click - javascript

I am using I wrote a small selenium script in javascript that executes find with node (filename.js) in the terminal but when I try to execute that script with a button click it doesnt work.
I took the guts out and put an alert() and it executed.
Just wondering if anyone can spot what I am doing wrong here?
Here is the script
async function example() {
const {Builder, By, Key, util} = require("selenium-webdriver");
require("chromedriver");
let driver = await new Builder().forBrowser("chrome").build();
await driver.get("http://google.com");
await driver.findElement(By.name("q")).sendKeys("Selenium Test", Key.RETURN);
}
And here is the php file I want to execute it from
<!doctype html>
<html lang="en">
<head>
<title>Sidebar 01</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="index.js"></script>
</head>
<body>
<center>
<button onclick="example();">Hello</button>
</center>
</body>
</html>

Related

How do I source javascript file on android?

This is my html and javascript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id = 'test' onclick= "switchtest()">Hello world</p>
<script src = 'phonetest.js'></script>
</body>
</html>
function switchtest(){
document.getElementById('test').innerHTML = 'Goodbye'
}
It works on visual studio code live server, but when I transfer these 2 files to my phone and open it on chrome there, the onclick function stops working. It only works if function is in the same html file. The path to my html file is "/Internal storage/TestCode/phonetest.html" and the path to my javascript file is "/Internal storage/TestCode/phonetest.js"
I read that I might need to specify file location or that I may need a xml file, but I am not sure what I must do exactly. Does anyone know a fix?

Getting Uncaught ReferenceError: exports is not defined

I am taking an input value from one page and on clicking a button I want to display it on another page in HTML.
I have exported my onclick function from one ts file and imported it in another.
Here's my TypeScript code for exporting:
var txt: HTMLInputElement=<HTMLInputElement>document.getElementById("text");
var dis=document.getElementById("dis")
export function send(){
return txt.value
}
here's the HTML for the same:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="menu bar.css">
<script src="cart.js" defer></script>
</head>
<body>
<input type="text" name="Number" id="text">
<button onclick="send();"></button>
<p id="dis"></p>
</body>
</html>
The importing page HTML is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="import.js" defer></script>
<title>Document</title>
</head>
<body>
<p id="display"></p>
</body>
</html>
And here's the TypeScript for it:
import { send } from "./main/cart";
var p =document.getElementById("display")
p.innerHTML+=send()
But I am getting Uncaught ReferenceError: exports is not defined
Most browser support commonjs modules. So you need to compile using babel if you code like that.
Here you can either use babel or write below codes.
module.exports = function send(){ //codes };
And import as....
let send = require("./main/cart");
Other code remains the same.

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html?

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html ??
<script type="text/javascript" src="file.js"></script>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="file_1.js"></script>
<script src="file_2.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<p id="test">abc</p>
</body>
file_1.js:
window.paragraph = readFile('file_to_read.tcl');
localStorage.setItem("paragraph", paragraph);
file_2.js:
setTimeout(function(){
document.getElementById("test").innerHTML = window.paragraph;
}, 3000);
need to read the "file_to_read.tcl" and then pass the "paragraph" variable to the second js file "file_2.js"
but still finding this issue : "ReferenceError: readFile is not defined"
thanks

How to fix the error "uncaught reference error: data is not defined" using javascript?

i want to log some value onto console on clicking a button by reading the function from scripts.js file from index.html file.
below is my code,
within index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body>
<button onClick="data()">click</button>
</body>
</html>
within scripts.js file
function data() {
const data = "3";
console.log('data');
}
in doing this, i get error like below,
"uncaught reference error: data is not defined at HTMLButtonElement.onclick"
not sure what is causing the problem. could someone help me with this. thanks.
EDIT:
in the source tab i see this
in the networks tab i see scripts.13aae5c5.js file being called.
EDIT2:
i have tried to create a div with id message and change its content with js code in scripts.js file and it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<h2>here i am </h2>
<div id="message"></div>
<script src="src/scripts.js"></script>
<button onclick="data">click</button>
</body>
in scripts.js file
function data() {
console.log('data');
}
document.getElementById('message').innerText = "Hello World!";
it displays hello world message but on clicking button it says uncaught reference error data not defined
Basicly there is nothing wrong here, exept you should considder binding your events in JS. BUT: This looks like you have some sort of preprocessor, like webpack or browserify, active at your project.
The preprocessors or packer will wrap your code in a seperate scope to prevent filling up the global space.
a small example:
// the code:
function data() {
return 'some data';
}
// will be converted to something like this (Boiled down for understanding)
(function(){
function data() {
return 'some data';
}
})()
The (function(){ ... })() is called a self executing function and will provide a encapsulation to your code. What is the purpose of a self executing function in javascript?
<button onClick="data()">click</button> on the other side will need method data in the global scope, or to be exact: window.data has to be set!
so you have two options right here:
bind the data method to the global scope
bind your event using js
function data() {
console.log('call to data');
}
// bind to global scope (not nice!)
window.data = data;
// onload method
function onload() {
console.log('onload');
}
window.onload = onload;
// bind event using JS (Waaaay nicer!)
// wait for Dom is loaded: https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
onload();
// get the element
const button = document.getElementById('test');
if(button) {
// bind event
button.addEventListener('click', data)
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body onload="onload()">
<button id="test" onClick="data()">click</button>
</body>
</html>

How do i run a node specific function on button click

I'm trying to change the context of a text file on an HTML button click.
I have this so far:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<script src="node-main.js"></script>
</head>
<body>
<embed src="table.txt">
<button onclick="Update()">Update</button>
</body>
</html>
node-main.js:
const fs = require('fs');
function Update() {
fs.writeFileSync("table.txt", 'New text');
}
It does not do what I was expecting.
It gives me the error:require is not defined
Thanks in advance :)
You should run node-main.js as a server that receives fetch requests from your client. You're trying to run server-side scripts on the client.
Try using Express.js
https://expressjs.com/

Categories