Launch Puppeteer on a manual Page - javascript

Is it possible to manually navigate to a Page, then launch a Puppeteer Script there, navigate to a different Page, launch script there, and so on..
I already did a bit of research but couldn't find anything.
I need to autofill a Calendar but its a little bit difficult to automate the whole Process, so it would be nice if I could navigate manually and launch the script when needed
Does anyone know if this is possible??

You could code an interactive console app, Like the one explained here.
On that app, you would launch a browser with headless in false, navigate where you want to go, and then from the console app you could type a command like fillform and execute the puppeteer code you want to run.

Not sure why someone down voted?
Yeah it's possible. It's not recommended. It's better to work your way through the errors and then understand how page automation really works. This is the point of Puppeteer. It's also already possible to run JavaScript on a page in chrome, using the console in dev-tools.
But if you wanted to manually navigate to a page using puppeteer, then run 'macros' on the page using node.js based on a condition, you'd want to do something like this:
headless: false launch (obviously so you can see the browser)
have your script/fill in function wait for an event on the page like a request which indicates the page was refreshed. You might be able to
use page.on() event to trigger the code wait for the
request to finish.
await page.setRequestInterception(true);
page.on('request', request => {
// Override headers
const headers = Object.assign({}, request.headers(), {
foo: 'bar', // set "foo" header
origin: undefined, // remove "origin" header
});
request.continue({headers});
});
from puppeteer

Related

How to wait for the page to load with Mocha JS + Selenium webdriver

I'm new on running test with Selenium webdriver and Mocha JS. I did a few things already but I'm stuck on an issue since a few days, and after reading some issues that looked similar on SO, I didn't find my answer.
So, I'm running tests and at some point, on of my clicks causes a page reload. Just after this reload, I'm trying to fill some form inputs, but I have errors because the browser is unable to locate the element I'm searching for.
Here is my script :
it("Test", async function() {
await driver.get("https://www.myURL.com/")
await driver.findElement(By.id("button")).click()
// Here is the reloading
await driver.findElement(By.name("login")).sendKeys("mylogin") // => not working because not loaded
})
I don't know if I have to put a timeout and how to place it or if I need something else.
For information, I'm running my tests on local first with Visual Studio Code (+ extensions).
Thanks everyone for help.
Greg

Fails to open native app with javascript, but same code works when initialized through button

This questions concernes a web app build in React that will be accessed with smartphones through their browsers. I use iPhone with both Safari and Chrome for testing.
One step involves opening a native authentication app.
According to the docs of the native app, it can be open from the browser by doing this:
const openAuthApp = () =>
(window.location = "https://app.bankid.com/?autostarttoken=&redirect=");
This works fine if I call the function when clicking a button, like this:
<button onClick={openAuthApp}>Open</button>
The above code triggers the opening of the authentication app immediately when clicking the button.
But when I trigger the function immediately after page has loaded, without using a button, like this
useEffect(() => {
openAuthApp();
}, []);
I get an error in the browser saying that the app was not found on this device.
Idk much about how browsers work but my first guess was that it takes some time for the browser to acquire information about all installed apps, so I added a timeout before executing the method:
useEffect(() => {
setTimeout(openAuthApp, 5000);
}, []);
It still failed. It works if I press the button less than 5 seconds after page load, so the time of initiation after page load shouldn't be the factor here.
I don't know how to proceed with this, and would appreciate ideas on how to move forward.
I suspect that your problem is a missing user gesture, which is common when using Claimed HTTPS Schemes - eg see this Chrome browser requirement.
There is a similar problem when using OAuth flows and the AppAuth pattern with HTTPS redirect URIs, which occurs for both iOS and Android. See the sections titled Problems Receiving Redirect Responses in my iOS and Android blog posts.
The solution for my mobile samples was to add an interstitial web page and if you do a view source you will see that it has an onclick handler that invokes a deep link after the user gesture:
document.getElementById('continueButton').onclick = () => {
const redirectUri = 'https://mobile.authsamples.com/basicmobileapp/oauth/callback';
window.location.href = redirectUri;
};
You won't need to go to these lengths of course, but I think you will need a user gesture to invoke the BankID app and do an external login reliably. In some ways this is a reasonable UX also, since you are keeping the user informed before you switch apps, rather than doing so abruptly. I would put a positive spin on it like this:
You will now be redirected to the BankID app to perform strong authentication and to provide consent. Please click Next to proceed.
Option 1:
Use window.location.href instead of window.location
const openAuthApp = () =>
(window.location.href = "https://app.bankid.com/?autostarttoken=&redirect=");
If your web app have the same domain as bankid.com use window.location.assign instead.
const openAuthApp = () =>
(window.location.assign= "https://app.bankid.com/?autostarttoken=&redirect=");
Option 2:
this will take 5 minutes, use branch.io for links (you do not need to install the SDK)
signup create new app, write the name of the app
got to "Configuration" from left menu select "I have an Android App"
add the link for your app and select it then fill other options if you like
it will give you a link "https://[YOUR_APP_ID ].app.link"
use this link instead of the default link
This should work without problem

Vanilla JS Single Sign-On attempt with MSAL.js leading to pop-up window showing a copy of the same page

I've copied the example app at this repository to try to implement single sign-on: https://github.com/Azure-Samples/ms-identity-javascript-v2. I've changed the config values match those of the Azure configuration. I'm using the public version of the authority: "https://login.microsoftonline.com/[APP VALUE HERE]" in this configuration as well.
For additional background - I had previously not had the redirectURL correctly matching, and the popup window from running the example showed my user account name before failing with an error. From this I take it to mean that the sign-on itself was successful in recognizing me, and that any problems are happening after that point.
The problem I'm running into now is that the SSO popup just loads an exact copy of the page that I used to launch the request in the first place - exact same display and everything. My logging shows that the request to myMSALObj.loginPopup({scopes: ["User.Read"]}) never completes, it simply hangs until I close the popup window, at which point it fails into the catch block for that request with the following error: "BrowserAuthError: user_cancelled: User cancelled the flow."
So it seems like the process is waiting for some step that never occurs, presumably coming as part of the call within the popup window. Has anyone else encountered this issue before? Does anyone have any recommendation for how to fix it or how to dig deeper into what's occurring?
This usually happens if the page you use as your redirectUri is either clearing the url hash on load or redirecting to another page on load. We usually recommend people use a blank page that doesn't implement any logic as their redirectUri to avoid issues like this. If that's not possible try to see what might be causing the server response to be removed from the popup.

How Can I Test A File Download Using Cypress When Running In Chrome

I have the following test that needs to verify that clicking a link downloads a PDF. This is especially important as we are using Gatsby, which in turn uses Reach Router's Link Component, and it is relatively easy to misconfigure things so that the router takes over the link and navigates to a 404 page instead of initiating a download.
describe.skip(`Downloads`, () => {
it(`Downloads the expected file`, () => {
cy.visit(pagePath)
cy.getByHref(downloadPath)
.should(`have.attr`, `target`, `_blank`)
.click()
cy.location(`pathname`).should(`eq`, pagePath)
})
})
While this isn't perfect, it does at least check that there is no navigation as a result of clicking the link.
The problem is that when running this test using cy run, which runs the tests in Chrome, the test hangs, due to Chrome's download dialogue.
How can I prevent the test from hanging?
Note that the downloadPath resolves to a pdf in the static directory, for example /static/example.pdf. There is no server component.
Also note that this is a different question to: How can I use Cypress.io to assert that a file download has been initiated without actually downloading?
Actually I searched alot about it and found that
It is not possible to run tests in headless mode with browser extensions installed, because the only supported browser in headless mode is Electron, and Electron doesn't support extensions as stated in the documentation.
Running headless Chrome is not supported yet. See this issue: #488
https://github.com/cypress-io/cypress/issues/488
And this is a an issue not so old it was tagged in Feb 2019
https://github.com/cypress-io/cypress/issues/832
https://github.com/cypress-io/cypress/issues/1235
There are a lot of ways to test this, so it depends. You’ll need to be aware of what actually causes the download, then think of a way to test that mechanism.
If your server sends specific disposition headers which cause a browser to prompt for download, you can figure out what URL this request is made to, and use cy.request() to hit that directly. Then you can test that the server send the right response headers.
If it’s an anchor that initiates the download, you could test that it has the right href property. As long as you can verify that clicking the button is going to make the right HTTP request, there’s nothing else to test for.
In the end, it’s up to you to know your implementation and to test enough to cover everything.
You can prevent the test from hanging by disabling the dialog asking where to save the file. Once you do that chrome will happily download your file and Cypress can continue running your test.
In chrome go to settings->Advanced->Downloads->Ask where to save each file before downloading and make sure it is off.
There are more complicated solutions in the links Apolo provided but this is a quick workaround.

Authenticate a facebook user in a Firefox plug-in

I'm trying to write a Firefox plug-in that accesses data from facebook.
Now I'm not sure how to get an access token.
I tried to implement the client side flow for desktop apps (with the fixed redirect uri), but the big problem I encounter there, is that JavaScript doesn't allow me to wait for the redirect to happen.
Any idea how this could be done?
As far as I understood it, because I don't have a webpage, the JavaScript API doesn't help much, right?
I guess that you are opening https://www.facebook.com/dialog/oauth in a browser tab to let the user log in and give you access. You don't need to pass a working redirect URL here, you can rather use something that will definitely not work, like http://my.extension.local/. Then you only need to detect when the tab gets redirected to that URL. If you have a classic extension, you register a progress listener on the <browser> element of that tab and look at onLocationChange() calls - once you see a location starting with http://my.extension.local/ you can cancel the request and close the tab, the necessary data is in the URL. If you use the Add-on SDK you can attach a ready event listener to the tab, something along these lines:
var tabs = require("tabs");
tabs.open({
url: "https://www.facebook.com/dialog/oauth?...",
inBackground: false,
onReady: function(tab)
{
if (tab.url.indexOf("http://my.extension.local/") == 0)
{
...
}
}
});

Categories

Resources