How to test url of new tab after clicking a link in laravel dusk - laravel-dusk

I'm testing my website using Laravel Dusk and I want to test a link that open a new tab to check if it goes to the correct URL. My test looks like this;
$this->browse(function (Browser $browser) {
$browser->loginAs(User::find(1))
->visit('/test')
->waitForLocation('/test')
->click('#test-link');
$window = collect($browser->driver->getWindowHandles())->last();
$browser->driver->switchTo()->window($window);
$url = $browser->driver->getCurrentURL();
Assert::assertTrue($url == 'http://foobar.com');
});
The problem here is that the URL that I'm getting is just about:blank. At first, I thought it's because the new tab is still loading but I tried to add a pause(5000) before getting current URL but it still returns about:blank. Why does the new tab doesn't proceed with the URL of the link?

Related

Geeting error in dynamica links on adding efr=1

Hello i am using dynamic links and these are working as expected what the problem is it is showing me a preview page in ios and i don't want to show a preview page that's why i am adding a efr=1 as in the link but i am getting an error in the browser that invalid url link
const link_URL = await dynamicLinks().buildShortLink({
link: 'https://reelweb.com/',
domainUriPrefix: 'https://reelweb.page.link',
ios: {
bundleId: 'com.reelweb',
appStoreId: '34354',
fallbackUrl: 'https://apps.apple.com/us/app/reelweb-app/id1535962213',
},
android: {
packageName: 'com.reelweb',
fallbackUrl: 'https://play.google.com/store/apps/details?id=com.reelweb',
}
});
sharing url after adding efr
https://reelweb.page.link/mJCyiFDrr78MGoye8&efr=1
So please suggest me how can i remove preview page in the sharing url.
error page
must be a parseable URI, but possibly incomplete to be a DynamicLink.
If you are the developer of this app, ensure that your Dynamic Links domain is correctly configured and that the path component of this URL is valid.

Is there a way to simulate a link/button click in mink?

I'm using a headless browser (phantomjs) in conjunction with Mink to do some functional testing on my Website.
Now in this setting, files can not be downloaded regularly e.g: by clicking a link. So I have to extract the url from the link or the button, and download the file manually.
As I just stated sometimes there is no link () for the download, but a button in a Form (e.g: Inputting data for a report in the form, and receiving the report file on submission).
So what I need to do is simulate clicking the link or button and extract the Data for the Request that would have been sent, and use that data to download the file manually.
Is there a way to do this?
Note: I'm using guzzle to actually download the file.
Mmmm... I don't know if you solved this and only as an alternative to typical mink methods. As Phantomjs is a javascript based browser engine, did you tried with javascript?
You could try something like this:
public function getElementHref($element)
{
/* #var FeatureContext $this */
$function = "(function(){
//Javascript method to get the href.
})()";
try {
return $this->featureContext->getSession()->evaluateScript($function);
} catch (Exception $e) {
throw new Exception('Element not found');
}
}
You can find a method to do this in javascript here: How to get anchor text/href on click using jQuery?
Then use the URL returned with file_get_contents (depending on the file type) and that's it.

open url in default OS browser

Is there a way to open URL in default OS browser?
I have MenuItem and want to open certain URL whenever user clicks this item:
var item = new gui.MenuItem({
label: 'Shortcut',
click: function(){
//here i want OS to open some URL
}
});
You can proceed like that:
gui.Shell.openExternal("http://website.com")
See the documentation here: https://github.com/rogerwang/node-webkit/wiki/Shell
See also How to open a browser window from a node-webkit app? for more informations.

Open URL from file system using PhantomJS

In page.open I can read about how to open a page using http.
How do use the WebPage module to open an url from the file system?
I have tried to omit http:// and have an url with ../some_dir/foo.html, but it seems to fail.
I Have tried this:
var page = require('webpage').create();
var fs = require('fs');
fs.changeWorkingDirectory('../foo/bar');
page.open('file://index.html', function(status)
{
console.log(status);
//console.log(document.title);
phantom.exit();
});
which outputs "fail".
I got the advice to test an absolute path, trying this:
var page = require('webpage').create();
var fs = require('fs');
page.open('file:///absolute/path/to/index.html', function(status)
{
console.log(page.title);
console.log($('body').length);
phantom.exit();
});
(with and without the call to changeWorkingDirectory, but with the same result)
I get a page title, but phantomjs reports that $ is undefined, jQuery is included in my html file (that is too large to post here). It is included like this:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
Trying to run functions also produces errors like
CanĀ“t find variable: function_name
Does the page/file you are opening already have jquery embedded on the page? If not, you will need to use either injectJs or includeJs on the page object before you can use the $ operator.
http://phantomjs.org/page-automation.html
If you are just doing a simple DOM selection, I would recommend just calling
document.querySelector('body').length
As these functions already exist within the Phantom instance.

single page application deep linking with login page

My team is going to build a single-page-application for our future project. At the moment, I have a problem with designing the app with login page. There are 2 approaches:
Create the login page as a separate page, the rest of the app is another single page.
The app has only 1 page and the login page will be a view in the app which is switched back and forth using javascript.
I don't know which approach I should take. I have read some discussions on the internet, it seems like it's more popular to create the login page as a separate page, the reason for this is we can use normal cookie-based authentication with session on server, redirect users to default page (main page) after successful login, and so on. Therefore, I'm thinking about creating the login page as a separate page, but I have a problem with deep linking.
For example, let's say I have 2 pages: login.html, index.html (main page). When an unauthenticated user requests a page like this index.html#product=1, the user will be redirected to the login.html, after successfully loging in, redirect the user back to index.html#product=1. But at this point, the #product=1 is lost.
Please advice me on how to keep the deep link or should I take the second approach?
Thank you
If you are building a single page app, it would be 'nicer' from the users point of view to have it all on one page, so I would suggest option 2.
Not sure if you need javascript to switch it though - you could use something like the following (PHP code)
At the start of the application saves what view the user is looking at and checks if the user pressed 'submit' on the login form
$selected_menu = $_GET['menu'] ;
//check to see if they've submitted the login form
if(isset($_POST['submit-login'])) {
If the login is successful, redirect them back to the same page with the appropriate view as a parameter
Then in the main page of the app when you are about to display data you would check to see if the user is validated, and if not then present the login form as part of the page.
$usr = CheckLogon();
if ( $usr == "" ) { // check for correct test to make sure user is logged on
ShowLoginForm();
....
I decided to go with approach 2: The app has only 1 page and the login page will be a view in the app which is switched back and forth using javascript.. I found out that it's not difficult to do and I can still use normal cookie-based authentication with session on server, redirect users to default page (main page) after successful login, and so on. Here is a sample code how I do it with angularjs.
Routing:
var App = angular.module('App', ["ui.state"]);
App.config(function ($stateProvider, $routeProvider) {
$stateProvider.
.state('login', {
url: "/login?returnUrl",
templateUrl: '/Home/Login',
controller:"LoginController"
})
.state('main', {
url: "/main",
abstract:true,
templateUrl: '/Home/Main',
controller: "MainController"
})
})
.run(function ($rootScope, $state, $stateParams, $location) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
if (error.status == 401) {
$state.transitionTo("login", { returnUrl: $location.url() });
}
})
});
The point here is when there is a route change error with status 401 (from the server) indicating that the user is not logged in, I will transition to login state with the return url.
After the user successfully logging in using ajax, I will transition the state back to my main view. Something like this:
$http.post("/Login", JSON.stringify({UserName:username,Password:password}))
.success(function (data, status, headers, config) {
var returnUrl = $stateParams.returnUrl ? $stateParams.returnUrl : "mydefaulturl";
$location.url(returnUrl);
})
With this approach, now I'm able to create deep-link to jump to a specific state in my app with login page and return url.