A mind is like a parachute. It doesn't work if it is not open.

Category

Web Design And Development

We often need to test many features in our site for several devices like, phones, tabs etc. In SDLC process, when we need to maintain the proper deployment process, many times we need to test a new feature or fix in out local environments. Most of us use a local setup (maybe XAMP, WAMP, LAMP etc) with virtual hosts for maintaining several projects. Therefore, it become difficult to test on mobile phones or tabs there is no easy option to set new host entry for those devices. However, we can solve this problem by adding single line of code in our virtual host settings.

Here, I am using WAMP. For WAMP:

First: You need to have a virtual host for the test site/project. (If you don’t have a virtual host then you should be able to access the local site by hitting the ip address of your PC on the browser of the device on which you need to test).

Second: Open the “httpd-vhosts.conf” in the “C:\wamp64\bin\apache\apache2.4.17\conf\extra” location. (location can vary depending on the apache and wamp version).

Third: Here, in the “httpd-vhosts.conf” file add “ServerAlias myproject.local.*.xip.io” line between the virtual host settings like bellow:

The ServerAlias directive allows for alternate names that Apache should map to the virtual host. The xip.io domain is a free wildcard DNS service from 37signals, which essentially resolves to your local ip address, and sends it back in the response. Now just fire up your various mobile devices and browse to the server alias above, substituting * with your local ip address.

What makes this so streamlined is that it allows for a consistent naming pattern that is easy to remember, and it removes unnecessary complication. As a bonus, it really comes in handy when a request comes in from a project manager to troubleshoot an issue on a recent project that you still have running on your local machine.

It will run the script and generate the detail report, log file and other necessary output.

You can also save the file as robot file like, debo-robot.robot

It that case you need to add “C:\Python27\Lib\site-packages\robot” in your Environment Variable.

Now type the following code to run the robot script:

robot demo-robot.robot

Please Note: If you are using any IDE like Pycharm, some notification will appear after installing Robot framework, which will say that there are some plugins for Robot, do you want to install it or not. In that case you should install it in the IDE.

Install WAMP:

Download the latest version of WAMP from here: http://www.wampserver.com/en/

Now, download all the Visual C++ Redistribuable Packages which are pre-requirement for installing WAMP. To find all the packages together, download the zip form here: http://wampserver.aviatechno.net/?lang=en&prerequis=afficher#vcpackages

Search for “Virtual Hosts” (without the quotes) and uncomment the Include conf/extra/httpd-vhosts.conf directive below.

Save and close the httpd.conf file.

Open your Apache Virtual Hosts (vhost) configuration file located one directory down from the Apache configuration file directory in C:\wamp\bin\Apache#.#.#\conf\extra\httpd-vhosts.conf.

Add the configuration for your new vhost. While virtual host configuration is outside the scope of this article, I suggest you visit the Apache project’s documentation. It does a decent job of explaining the various configuration directives. I have included mine below with some comments as a starting point.

Save and close the httpd-vhosts.conf file.

Open your Windows hosts file located in C:\Windows\System32\drivers\etc\hosts.

Add a new entry for the vhost you created.

Save and close the hosts file.

Resart All Services in WAMP, pop open a web browser and access your new virtual host. Celebrate!

Recently I have faced some problems with Firefox driver while I was using Selenium Webdriver(Python). I did not have much time to investigate the issue with Firefox driver, therefore, I switched to Chromedriver. However, I needed to install Chrome driver separately in Linux mint. I hope the procedure will also work for other Linux distro as well.

Here goes the simple instructions for installing Chrome Driver:

1. Install unzip:

sudo apt-get install unzip

2. Download latest version from official website and upzip it (here for instance, to ~/Downloads. Example: For Robert’s system the location might be ‘/home/robert/Downloads’.):

Another Note: All the drivers often update very frequently. Therefore, if any of the driver (Chrome, Firefox or any other) suddenly stop working then find and download the latest version of that driver and follow step 3 and 4 which most probably fix the issue.

Create an image gallery in Drupal is not difficult, you can use some modules but they’re often more than you need and sometime difficult to tweak. I will show you how to create a gallery page that you could easily modify or customize.

Overview

Through the tutorial I’m going to show you how to create an image gallery page on Bartik (Drupal’s default theme) theme. Yes, you can use any theme you want.

Requirements

Step 1: Create custom content type

Go to Structure -> Content Types (/admin/structure/types) and add a new content type called Gallery (remember this machine name for step 5). This is pretty simple, just follow the prompts and fill in the fields.

Create custom content type

Step 2: Create image style

From admin toolbar, go to Configuration -> Image Styles (your_site/admin/config/media/image-styles), add new style name “gallery-thumb”. Click “Create new style” and add “Scale and Crop” effect, fill 150 in with, and 150 in height.

Step 3: Manage fields

Delete body field and add new “Image Gallery” field. On image gallery field settings, scroll to “Number of value” and choose “Unlimited”.

Next, click to “manage display” next Gallery content type

“manage display”

After this step, you’ll need to add some demo content (go to your_site/node/add/gallery).

Add some demo contents

Step 4: Create Gallery page with Views module

Go to Structure -> Views and add new views:

Create Gallery page with Views module

Step 5: Coding the Template

Go into the theme directory (themes/bartik/templates/), find node.tpl.php, copy, paste and rename to node–gallery.tpl.php (gallery is your content type machine name, read more here). Open node–gallery.tpl.php and replace with this code:

Step 6: Adding effects

Adding effects

Now you have a gallery page with thumbnail link to original image file. In this step, I’m going to add some effects (inspire from Google+). Go into the theme css directory (themes/bartik/css/) and open style.css, add this code to bottom:

Generic Port Issue for wamp:

After installing wamp in windows many of a time we face a common problem like it doesn’t turn on. It just remain orange not turn into green.

It generally happen when the desire port is engaged by any other running application (i.e skype often use port 80 or 443). In that case we need to find out the specific program and change the port number then restart wamp.

For skype it is necessary to uncheck the alternative port use.

Hope that would work!

Now let’s set the mysql password:

Click on wamp icon from system tray.

Click MySQL > MySQL console

Now press enter(if it is the first time there should not be any password)

After the console is ready just type :

SET PASSWORD FOR root@localhost=PASSWORD('yourpassword');

Here ‘yourpassword’ is the sting you want to set as password.

A successful password change will result in the following message (time consumed may differ per case).

Query OK, 0 rows affected (0.03 sec) mysql>

It’s almost done!! Now let’s restart the wamp and try your password it will take to the console.

Now you can’t access ‘http://localhost/phpmyadmin/&#8217; cause you just change the password but not set in ‘config.inc.php’ file. So all you need to go ‘C:\wamp\apps\phpmyadmin3.5.1’. Now open ‘config.inc.php’ file with a text editor. Scroll down and type your new password into ”.

Right down the new password into ” save the file and restart the wamp server

Recently I need to populate my new Drupal site with some new registered users. For this I used a selenium script. Here goes the script.

drupal_test

getEval

array=new Array(2);

getEval

index=0;

store

javascript{array.length}

x

gotoIf

${x}>19

target_2

while

index<array.length

label

target_1

open

/drupal-7.14/?q=user/register

randomText

id=edit-name

randomEmail

id=edit-mail

type

id=edit-field-age-und-0-value

24

type

id=edit-field-first-name-und-0-value

Jack

type

id=edit-field-last-name-und-0-value

sparrow

type

id=edit-field-sex-und-0-value

Male

clickAndWait

id=edit-submit

waitForText

css=div.messages.status

Status message Thank you for applying for an account. Your account is currently pending approval by the site administrator.
In the meantime, a welcome message with further instructions has been sent to your e-mail address.

verifyTextPresent

Status message Thank you for applying for an account. Your account is currently pending approval by the site administrator.
In the meantime, a welcome message with further instructions has been sent to your e-mail address.

getEval

index++;

endWhile

label

target_2

echo

Either completed or you attempted to create more then 20 user accorunt, are you sure? To continue change the value in line 5.

Here I used two custom commands: “randomText” and “randomEmail”. You can find the detail of this two custom command Here.

Customization:

In this script I use a limit, for this maximum 19 users can create using this script. One can change the limit easily by customizing line number 4.

P.S: The code is open and used for learning purpose only. If anyone use this code for any abusive purpose that would be his/her own responsibilities.

Once you have added the file to the options page you need to restart the Selenium IDE for the changes to take effect.

Whenever you add some new code or make changes to the exiting one in the ‘user-extensions.js’, you need to restart the Selenium IDE for the changes to take effect.

Now once you have restarted the IDE, you can see that your command has been added to the drop-down.

Now you can use this command as you like. Here’s and example:

2. Use single line command in a selenium script:

Here is the single line code for random email generation.

storeEval

“six.testemail+” + Math.floor(Math.random()*11111) + “@gmail.com”;

email

type

id=signup_email

${email}

type

id=field_737

${email}

In first line the “storeEval” command is used for the javascript code in the middle column. and in the right most column “email” is used to store the generated random email into a variable called “email”.

Here one thing can be noted that storing is not necessary, I used it because I need to input the same random email into two different field that’s why I need to generate the random email and store it into a variable then type the stored value from variable to text fields, otherwise every time I use the js it generate different value so the two fields have different values and show error for mismatching.

P.S.

Random Text generation:

Here is another tips: We often need to use random text like random “username” or for something like that. We can easily make a custom command for this using our previous command. We just need to change like this: