Back-End Tag

Laravel Dusk: browser automation & PHP to programmatically surf the web

Laravel Dusk provides an expressive, easy-to-use browser automation and testing API. By default, Dusk does not require you to install JDK or Selenium on your machine. Instead, Dusk uses a standalone ChromeDriver installation. However, you are free to utilize any other Selenium compatible driver you wish.

Installation

To get started, you should add the laravel/dusk Composer dependency to your project:

composer require --dev laravel/dusk

Once Dusk is installed, you should register the Laravel\Dusk\DuskServiceProvider service provider. Typically, this will be done automatically via Laravel’s automatic service provider registration.

After installing the Dusk package, run the dusk:install Artisan command:

php artisan dusk:install

A Browser directory will be created within your tests directory and will contain an example test. Next, set the APP_URL environment variable in your .env file. This value should match the URL you use to access your application in a browser.

To run your tests, use the dusk Artisan command. The dusk command accepts any argument that is also accepted by the phpunit command:

php artisan dusk

Programmatically test applications

Laravel Dusk is a powerful browser automation tool for Laravel. With Dusk you can programmatically test your own applications or visit any website on the internet using a real Chrome browser. Using Dusk you can automate repetitive tasks, scrape information from other sites or test to make sure your app always works in the browser. In this tutorial we’ll go through how to create a job, login to a mythical website and click around.

Create a new Laravel app:

$ laravel new dusk-scraper
$ composer require --dev laravel/dusk
$ php artisan dusk:install
Dusk scaffolding installed successfully.

In the tests/DuskTestCase.php file that Laravel generated you will have a call to startChromeDriver in the prepare function (below). The prepare function gets called before the Dusk test is executed. It’s an abstract class so probably not a good place for us to put our code. We can make a new fresh dusk test case that extends the DuskTestCase with an Artisan command:

$ php artisan dusk:make ScrapeTheWebTest

This file (ScrapeTheWeb.php) will appear in tests/Browser directory. You can run the test with another Artisan command:

$ php artisan dusk-scraper

Right now it does not do anything. Here is the code to login to a website and click some buttons:

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class ScrapeTheWebTest extends DuskTestCase
{

    private $order_ids;

    public function __construct($name = null, array $data = [], $dataName = '')
    {
        parent::__construct($name, $data, $dataName);

        $this->user_ids = [
            1,
            2,
            3,
        ];
    }

    /** @test */
    public function loginAndClickButton()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('https://website.com/login')
                    ->type('input .usernameField', env('USERNAME'))
                    ->type('input .passwordField', env('PASSWORD'))
                    ->click('#login')
                    ->waitForText('Orders');
            @foreach($this->user_ids as $user_id)
            {
                 $browser->visit('https://website.com/users/' . $user_id)
                    ->waitForText('This is protected page')
                    ->click('button .button-im-looking-4')
                    ->waitForText('Page after the button')
                    ->click('.another #button')
                    ->pause(4000);
            }

        });
    }
}

We’m using environment variables to store the values for username and password so in case they are sensitive you don’t have to check them in to version control. To find elements on the page use CSS selectors and browser devtools to target specific elements. We filter through some custom numbers and visit websites dynamically based on this data.

Your tests will run in the terminal with the php artisan dusk command. The fun really comes in when you see the browser perform the actions you specify. By default Laravel Dusk runs what’s called a headless browser that you won’t be able to watch. To watch the browser perform actions head to DuskTestCase.php that our ScrapeTheWebTest inherits from. Once there remove the --headless option:

/**
 * Create the RemoteWebDriver instance.
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    $options = (new ChromeOptions)->addArguments([
        '--disable-gpu',
        //'--headless'
    ]);

    return RemoteWebDriver::create(
        'http://localhost:9515', DesiredCapabilities::chrome()->setCapability(
            ChromeOptions::CAPABILITY, $options
        )
    );
}

With the headless option removed you can run the tests and watch the browser perform the actions that you specified! From this command you can use the full power of Laravel to create database records, trigger jobs, update data or anything else you can think of.

For more Information and to build a website using Laravel, Hire Laravel Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom website using Laravel, please visit our technology page

Getting started with Laravel Nova

Laravel Nova, the latest addition to the Laravel ecosystem has arrived. So, what exactly is it?

Well, straight from the marketing website it’s defined as, “a beautifully designed administration panel for Laravel. Carefully crafted by the creators of Laravel to make you the most productive developer in the galaxy.” It can be everything from an admin panel to a CMS to a CRM, and I’m just scratching the surface. It’s rocket fuel for your Laravel projects that lets you focus on the features that matter to your users.

Features of Nova

• Resource Management: Allows for quick integration of your models to your dashboard. It supports all Eloquent relationships including pivot tables.
• Actions: Actions are PHP tasks that you can run against a resource or batch of resources. Have an action that takes a while? No problem, Nova’s queued actions will keep your administration panel feeling snappy.
• Filters: Write custom filters for your resource indexes to offer your users quick glances at different segments of your data. To get you started, we’ve included built-in filters for “soft deleted” resources.
• Lenses: Need to customize a resource list a little more than a filter can provide? No problem. Add lenses to your resource to take full control over the entire Eloquent query.
• Metrics: Nova makes it painless to quickly display custom metrics for your application, allowing you to generate three types of graphs in seconds. To put the cherry on top, we’ve included query helpers to make it all easy as pie.
• Authorization: Nova is beautifully integrated with Laravel’s existing authorization policies. Let your Nova resources automatically leverage your existing application policies to determine a user’s abilities. Fine-grained authorization support is even provided for relationships, tools, actions, lenses, and fields.
• Custom Fields: Need a field type that isn’t included with Nova? No problem – use the Nova CLI to generate a custom field and take total control over its implementation and design.
• Scout search integration: Feel the power of the Laravel ecosystem by linking your Nova administration panel with Laravel Scout. Once you do, you’ll get blazing fast search results powered by Algolia and the cloud.
• Custom Tools: Nova offers CLI generators for scaffolding your own custom tools. We’ll give you a Vue component and infinite possibilities. Build the custom tools your business requires, or build the next great Nova add-on and share it with the world.

Getting Started

First things first, you’ll need to head over to the Nova website and register for an account. Once you’re in, you’ll need to purchase a license to get access to the code.

Once you have a license, you can download the Nova files to your machine. Next, create a new Laravel project using laravel new <your-project-name> or you can add it to an existing project. From the command line, I used mv <path-to-nova-download> <path-to-my-project-nova-directory> to add it. This way, I was sure to include all of the hidden files like the .gitignore

Project Installation

With the source code in place, you can configure your composer.json to recognize Nova by adding this snippet:

"repositories": [
    {
        "type": "path",
        "url": "./nova"
    }
],

Then, you’ll add Nova to the require section of composer.json like this:

"require": {
    "php": "^7.1.3",
    "fideloper/proxy": "^4.0",
    "laravel/framework": "5.6.*",
    "laravel/nova": "*"
},

Before running the installation commands, make sure you configure your DB in your .env.

With that setup, you can run the following commands from your terminal to install Nova:

    composer update
    php artisan nova:install
    php artisan migrate

Bada bing bada boom, Nova is now installed in our project! We can now navigate to the /nova route and see the login screen.

pics courtesy: medium.com

Add Your First User

To log in, we need to create a user. Nova includes an out-of-the-box command so we can register anyone on the fly. We can run php artisan nova:user in our terminal and follow the prompts to add our first user. Now, we’re ready to log in and start our blog!

pics courtesy: medium.com

For more Information and to build a website using Laravel, Hire Laravel Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom website using Laravel, please visit our technology page

Vue JS and Laravel – The best performative combination for front-end and back-end

“Vue.js is a dynamic structure for building UIs”. Vue.js at its core is centered on the view layer just of an application, so integrating with different stages or existing applications is extremely simple. You can likewise utilize Vue.js all alone to manufacture modern single page applications.

Uses and Features of Vue.js

• Vue.js is extremely simple to use and has a substantially little learning curve than other frameworks.
• It has impacting features compared to others. Vue.js utilizes virtual DOM and that makes it extremely quick.
• On the off chance that you are working in a group with various engineers at that point don’t stress. Since Vue.js can without much of a stretch incorporate with other mainstream structures.
• Vue.js has many Built-in parts while it’s extremely lightweight.

Vue.js has got prominent reception, with many open source frameworks and enormous organizations embracing it for building up the front-end. Laravel, the leading PHP web framework, now comes with Vue.js integrated as the default front-end

Features of Laravel in a glimpse

• Caching
• Laravel Scout
• Composer
• Templates
• Libraries
• Direct Testing Option

Why should we use Vue.js with Laravel?

Event Driven Application on the Front-End

Applications on the web today are event-driven. Vue.js gives you a chance to assemble a full-scale application that is event-driven and has all activity totally handle on the frontend. They are built to guarantee clients have a consistent experience like they would if they utilized an application introduced on their PC.

Everything happens in front-end due to which the pages are not loaded again and again for any process to take place. This event-driven concept is a feature of Vue.js.

Reactive components constitute for an event-driven app

Given that it couples pleasantly with Laravel, you will just need to make a couple of requests for information from your Laravel application and roll out UI improvements by exchanging components without reloading the page.

One can trigger UI changes that are seamless with your Vue.js frontend, which in turn gives users an incredible experience. Given Vue.js speed and execution, this happens quick and easily without taking up such a large amount of your PC resources.

Build complex frontend pages

When you make your application with Vue.js components, every component’s conditions are consequently tracked amid its render, so the framework knows decisively which part is to be updated. This makes all updates to the DOM utilize negligible assets, along these lines enhancing the general application proficiency.

Vue.js utilization of a one-way data binding model also makes state management easier in complex applications.

Single-Page Apps

Single Page Applications are the best in the most recent decade. It opens up an application to a more extensive group of users than previously.

The whole application resources get stacked once everything that your application does as the client connects with it is asking for information which commonly requires low data transmission to fulfill a request.

Easy to learn and use

Vue.js is not at all hard to get into. You feel that you are composing plain JavaScript when you utilize Vue.js and you can make a basic application with plain JavaScript and it stays legitimate in Vue.js.

Another awesome thing about Vue.js is that your substantial HTML is additionally a legitimate Vue.js layout. You can keep your CSS outside or you can process it with JavaScript relying upon your application needs. You can likewise exploit checked styling, to apply style changes to a solitary segment on the fly without the change influencing different parts.

For more Information and to build a website using Laravel, Hire Laravel Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom website using Vue.js, please visit our technology page