Unable to locate element inside Gmail - javascript

I've created a project using Nightwatch.js. The process performs checks in our dev enviroment (which works just fine) and will end up sending a test email to a Gmail account. The process will then go to Gmail, login and click the correct email.
I am attempting to get the URL that was sent to the application (a forgot password link) and sending the browser to the correct URL.
The issue is when I use the following code:
browser
.useXpath()
.getText("string(//*[text()[contains(text(),'RetrievePassword')]])",function(result)
{
console.log(result.log)
})
I get this error:
ERROR: Unable to locate element "" using: xpath
But when I tell Nightwatch to click the link, it will do so with no issue. Any idea?
The URL looks like this:
https://test.website.com/Secure/RetrievePassword.aspx?code=123456789

I think your XPath selector is wrong. If you use //*[contains(text(),'RetrievePassword')] instead, it should work. Here is a basic example:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
https://test.website.com/Secure/RetrievePassword.aspx?code=123456789
</body>
</html>
JavaScript (gmail.js)
module.exports = {
'Gmail': function (browser) {
browser
.url('http://localhost:8000/index.html') // Change this if needed
.waitForElementPresent('body', 1000)
.useXpath()
.getText("//*[contains(text(),'RetrievePassword')]", function (res) {
console.log(res.value);
})
.end();
}
};
Command
nightwatch -t tests/gmail.js

Related

How to import a blazor custom element in another JS application?

I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

document.getElementById() is not defined when running browser code in VSCode

I was trying to use the document.getElementbyId() but when I run the console it tells me it is not defined.
My index.html and index.js are in the same folder the source should be OK.
I'm using Cmd + Shift + P in Visual Studio Code and then choose "Run: without debbuging". The error message shows in the integrated console.
let word1 = "Alex";
let word2 = "Toko";
let example = `${word1} ${word2}`;
var doc = document.getElementById("test").innerText = example;
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="test"> </p>
<script src="index.js"> </script>
</body>
</html>
The issue is the waqy you're running the code.
cmd+shift+P will run the index.js on it's own, and it won't know or care about the html.
Instead, open the html in your browser, and it should work.
The reason it won't work on vs code is that it runs the javascript file directly, and while the html links to the javascript, it won't work the other way around.
cmd+shift+P is used for server-side javascript, not client side. client side, you can just test in browser.

Very simple ajax request not working

I'm making a web app. I run this function with jquery 1.11.2 in index.html:
$.ajax("http://localhost/index.html")
.done(function () {
console.log("success");
})
.fail(function () {
console.log("fail");
});
It works fine. I try it with another file:
$.ajax("http://localhost/online.html")
.done(function () {
console.log("success");
})
.fail(function () {
console.log("fail");
});
I have this error message:
GET http://localhost/online.html net::ERR_FAILED
online.html is in the same folder, it contains:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Picture Viewer</title>
</head>
<body>
</body>
</html>
Why it doesn't work ?
Thanks.
I'm using a manifest.mf to build a web app which work even if device hasn't access to internet.
If I add online.html in manifest.mf it works, I don't understand why. Now idk how to check if the browser is online or offline, the request will always success with this method.
So I found answer to my original question, thanks for help.
Edit: Still work if I put online.html in NETWORK list in manifest.mf, but it looks like the browser still store it in cache.
Edit 2: Finally working fine if I request a .php page instead of requesting .html contents.

Trying to use youtube api on html page

Here is my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<script type="text/javascript">
function showResponse(response){
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
function onClientLoad(){
gapi.client.load('youtube','v3', onYouTubeApiLoad);
}
function onYouTubeApiLoad(){
gapi.client.setApiKey('MyActualKey');
search();
}
function search(){
var request = gapi.client.youtube.search.list({
part: 'snippet'
});
request.execute(onSearchResponse);
}
function onSearchResponse(response){
showResponse(response);
}
</script>
<title></title>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
</head>
<body>
<div id="response"></div>
</body>
</html>
This code is from Codecademy, and I thought I can use it on an html page and it would work.
I got an API key from google and I set my Youtube data api v3 setting to enabled in my google developers console, but this code gives me a blank page.
What am I doing wrong?
There are a few missing pieces, code snippets which codecademy likely took for granted but which are essential when placing it in your own server outside of their app. First of all, you need a line that actually loads the gapi library from google. You can put this in your code, just before the closing :
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
In short, this will get the library from Google's servers, and when it's loaded the library will automatically call your onClientLoad method, kicking off your app.
Next, you say you have an API key; make sure you put that key into your code by replacing this:
gapi.client.setApiKey('MyKey');
with this:
gapi.client.setApiKey('{WHATEVER_YOUR_ACTUAL_KEY IS');
Finally, as the commenters mentioned, your body is empty, so when your code executes the showResponse method there's no place to put what comes back. Add this:
<div id="response"></div>

Jquery/JS not loading text file

I am writing a word/name generator. On my local computer the script works fine but when uploaded, the jQuery is not able to load the text file and I get a 404 not found error. The text file is there, I have checked a number of times. Here is the simplified code: http://namepicker.site11.com/test.html
Thank you for any advise,
Todd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery-Load Text File</title>
<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function loadXML()
{
var file= './names/names.txt';
$.get(file, function(data) {
alert(data);
});
}
</script>
</head>
<body onload="loadXML();">
</body>
</html>
Well a simple look at Chrome's Developer Tools reveals this error:
GET http://namepicker.site11.com/names/names.txt 404 (Not Found)
Obviously, you'd need to actually upload the names.txt file into the names directory.
Edit: I see that other files redirect to your hosting 404 page while names/names.txt does not, so perhaps it exists but does it somehow still send a 404 code. Is it a real text file or an underlying PHP file?
http://namepicker.site11.com/names/names.txt
The file does not exist, It needs to be there to be loaded. Try creating it and see if your having the same issues.
EDIT:
http://namepicker.site11.com/names/
File does seem to exist, perhaps check the CHMOD settings on the files.
jQuery is not ready yet. You need to wrap jQuery functions.
For example:
$(function() {
$(window).load(function()
var file= './names/names.txt';
$.get(file, function(data) {
alert(data);
});
});
});

Categories

Resources