Read/Write CSV file in Protractor

Table of content

CSV Files
CSV file parsing without any packages
papaparse module with Protractor
Read CSV file using Papaparse
Read CSV file in Protractor with Typescript
CSV file With the header in Protractor
Read Specific Column from the CSV file
Other than Comma Separated files
Writing a CSV file in protractor

CSV Files

A CSV (Comma Separated Values) file is a text-based format that represents the data typically found in a spreadsheet or a database table.

Each row is terminated by a newline to begin the next row. Within the row, each column is distinguished by a comma. Data within each column can be double-quoted to escape embedded commas in the data. Embedded double quotes are escaped with a pair of double-quote characters.

But why do we need CSV file ?
XML files bit complex to parse, and we need to know XPath writing skills to parse the values from the XML files.

Excel files are supported by Microsoft, and nowadays, other operating systems also support excel sheets but excel sheets become heavy when we store large data.

CSV files overcome those issues, and CSV files are not dependent on packages, if we do not have any package to read, then we can read with normal files reading modules and split the values using comma(,).

It is a common format for data interchange as it is simple, compact, and ubiquitous. It will open into Excel with a double click, and nearly all databases have a tool to allow import from CSV. It is also readily parsable with simple code.

Learn to handle Upload Pop in Protractor

CSV file parsing without any packages

As I stated earlier that CSV files are not dependent on modules and packages, we would be trying to read the CSV file without using any package in this example, but if you want to go with the package then you move to papaparse CSV package in protractor

In this example, we will be using file reading modules along with basic logics to parse the CSV file Store below values in a file with .csv extension

google>q>cherchertech selenium
bing>k>selenium-webdriver cherchertech

Step to parse the CSV file with the basic file system :

Create it and describe block in jasmine
Import the file system package fs using require

const fs = require('fs');

Use readFileSync method to read the data from the file

const csv = fs.readFileSync('D:Pathabc.csv', 'utf8');

Split the data using (newline) as rows are stored in new lines in CSV files
Once we split, we will have an array of values, iterate them to get the values

var allTextLines = csv.split(/
|
/);

Now split the line using the delimiter more often the CSV file values are stored with comma separation, but in the above file I have separated using greater than sign(>)

var data = allTextLines[i].split('>');

Push the values from a row into an array

describe('Protractor Typescript Demo', function() {
	it('CSV File Operations', function() {
		const fs = require('fs');
		const csv = fs.readFileSync('D:Pathabc.csv', 'utf8');
			var allTextLines = csv.split(/
|
/);
			var lines = [];
			for (var i=0; i< allTextLines.length; i++) {
				var data = allTextLines[i].split('>');
					var tarr = [];
					for (var j=0; j$lt&data.length; j++) {
						tarr.push(data[j]);
					}
					lines.push(tarr);
			}
		console.log("********file data content********");
		console.log(lines);
	});
});

The output of the reading CSV file

Started
****************
[ [ 'google', 'q', 'cherchertech selenium' ],
  [ 'bing', 'k', 'selenium-webdriver cherchertech' ] ]
.
1 spec, 0 failures
Finished in 0.047 seconds

Protractor Interview Questions

papaparse module with Protractor

The Papaparse package is a parser converting CSV text input into arrays or objects. It implements a CSV package.

We can use the PapaParse package along with our protractor to read and write the files from the Local system and also from a specific URL.

By default, we may not get PapaParse module/package with protractor, so to use the Papaparse package, we have to download the package in nodejs.

Please make sure; you are installing the PapaParse package in the local folder node modules where your protractor is installed.

npm install papaparse

Sample CSV file

Please store the below content in a CSV file in your local system.

karthiq,23,cherchertech
jeff,52,amazon

JSON format Logging using winston in Protractor

Read CSV file using Papaparse

After installing papaparse package, create a describe and it block using Jasmine

Import the papaparse module

const papa = require('papaparse');

import the fs module for handling the file system.

const fs = require('fs');

Call the readFileSync method from the fs module, this method reads the files and stores the file content as raw data.

const file = fs.readFileSync('D:Pathabc.csv', 'utf8');

Now use the parse method from the papaparse module and pass the data

papa.parse(file, {

Once the parse is complete, the parsed data will be stored in the result variable

complete: (result) =>{

You can print the result variable, the stored value in the variable is in nested array format, The nested array will have data like : all the rows as arrays, and all the values in a row as arrays inside the rows array.

Complete program for reading CSV files using papaparse.

const papa = require('papaparse');
	const fs = require('fs');
	const file = fs.readFileSync('D:Pathabc.csv', 'utf8');
	papa.parse(file, {
		complete: (result) =>{
			console.log("@@@@@ Complete CSV file : "+result.data)
			console.log("###### row: "+result.data[0])
			console.log("****** value in a row: "+result.data[0][2])
		}
	});

Output of the papaparse program

@@@@@ Complete CSV file : karthiq,23,cherchertech,jeff,52,amazon
###### row: karthiq,23,cherchertech
****** value in a row: cherchertech

mouseUp & mouseUp in Protractor

Read CSV file in Protractor with Typescript

We can use the Papa Parse package along with with protractor, below program will get the first row, the third value from the CSV file and it will search that value in google

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('CSV File Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		// navigate to the url
		browser.get("https://google.com");
		const papa = require('papaparse');
		const fs = require('fs');
		const file = fs.readFileSync('D:Pathabc.csv', 'utf8');
		papa.parse(file, {
			complete: (result) =>{
				element(by.name("q")).sendKeys(result.data[0][2])
			}
		});
	});
});

Send emails using NodeMailer

Steps to send eMail

CSV file With the header in Protractor

When the user/someone wants the reader to understand that what they are reading, in the above CSV file, I have given a few data that you may or may not understand.

In such situations, people tend to lose time on guessing what the values are, but in real-time scenarios most of the time, we do not have to guess the values as the CSV file creator will provide some information about the values present in the CSV file

People may not provide details 2 page description, but they will provide information on the columns like what the column contains

To provide such information, people tend to write a header in the CSV file; the previous CSV file I used does not have a header.

Let's create the CSV file to have a header "URL, locator,searchTerm."

URL,NAME_LOCATOR,SEARCH_TERM
google.com,q,cherchertech selenium
bing.com,k, selenium-webdriver cherchertech

We can handle CSV files with headers in the Papaparse module along with protractor. We have to provide information to papaparse that we have a header in out file.

papa.parse(file, {
		header: true
	});

When we have a header, we can get the column value using the header from a row. console.log("URL : "+firstRow["URL"])

Now in Below program, I am trying to read the first row details, like URL, Name_Locator and SearchTerm

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('CSV File Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		const papa = require('papaparse');
		const fs = require('fs');
		const file = fs.readFileSync('D:Pathabc.csv', 'utf8');
		let results = papa.parse(file, {
			header: true
		});
		console.log("*************Complete CSV file*************")
		console.log(results.data["meta"])
		// get first row
		let firstRow = results.data[0]
		console.log("@@@@@@@@ First Row from file @@@@@@@@@@@@@@@")
		console.log(results)
		console.log("URL : "+firstRow["URL"])
		console.log("NAME_LOCATOR : "+firstRow["NAME_LOCATOR"])
		console.log("SERACH_TERM : "+firstRow["SEARCH_TERM"])
		browser.get("https://"+firstRow["URL"]+".com");
		element(by.name(firstRow["NAME_LOCATOR"])).sendKeys(firstRow["SEARCH_TERM"])
	});
});

The output of the CSV file with the header in the protractor

[11:15:03] I/launcher - Running 1 instances of WebDriver
[11:15:03] I/local - Starting selenium standalone server...
[11:15:06] I/local - Selenium standalone server started at http://172.19.yyy.x:50350/wd/hub
Started
*************Complete CSV file*************
[ { URL: 'google',
    NAME_LOCATOR: 'q',
    SEARCH_TERM: 'cherchertech selenium' },
  { URL: 'bing',
    NAME_LOCATOR: 'k',
    SEARCH_TERM: 'selenium-webdriver cherchertech' } ]
@@@@@@@@ First Row from file @@@@@@@@@@@@@@@
{ data:
   [ { URL: 'google',
       NAME_LOCATOR: 'q',
       SEARCH_TERM: 'cherchertech selenium' },
     { URL: 'bing',
       NAME_LOCATOR: 'k',
       SEARCH_TERM: 'selenium-webdriver cherchertech' } ],
  errors: [],
  meta:
   { delimiter: ',',
     linebreak: '
',
     aborted: false,
     truncated: false,
     cursor: 100,
     fields: [ 'URL', 'NAME_LOCATOR', 'SEARCH_TERM' ] } }
URL : google
NAME_LOCATOR : q
SERACH_TERM : cherchertech selenium
.
1 spec, 0 failures
Finished in 10.908 seconds
[11:15:22] I/local - Shutting down selenium standalone server.
[11:15:22] I/launcher - 0 instance(s) of WebDriver still running
[11:15:22] I/launcher - chrome #01 passed

Insight about get Attributes

Read Specific Column from the CSV file

Sometimes we may need to read a specific column from the CSV file; we can read a specific column value by iterating all the rows with a column condition

it('CSV File Operations', function() {
	const papa = require('papaparse');
	const fs = require('fs');
	const file = fs.readFileSync('D:Pathabc.csv', 'utf8');
	let results = papa.parse(file, {
		header: true
	});
	console.log("SearchTerm column Values")
	for(let i=0; i<results.data.length; i++){
		console.log(results.data[i]["SEARCH_TERM"])
	}
});

The Output of Specific CSV file with column program

Started
SearchTerm column Values
cherchertech selenium
selenium-webdriver cherchertech
.
1 spec, 0 failures
Finished in 0.047 seconds

Expected Conditions

Other than Comma Separated files

CSV file means Comma Separated Values file, but it does not mean it must always contain values with comma separation.

There is a chance that a CSV file can contain separators like the pipe(|), semi-colon(;), greater than symbol(>), less than symbol.

In these cases, we have to explicitly mention that we have separated the values with a particular symbol in the file to the Papaparse using delimiter Parameter

Papa.parse(data, {
    delimiter: ",",
    header: true
});

Consider below data which is separated with >

URL>NAME_LOCATOR>SEARCH_TERM
google>q>cherchertech selenium
bing>k>selenium-webdriver cherchertech

program for reading CSV file delimiter other than a comma

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	it('CSV File Operations', function() {
		const papa = require('papaparse');
		const fs = require('fs');
		const file = fs.readFileSync('D:Pathabc.csv', 'utf8');
		let results = papa.parse(file, {
			header: true,
			delimiter:'>'
		});
		console.log("*****Using > delimiter ********")
		console.log("SearchTerm column Values :")
		for(let i=0; i< results.data.length; i++){
			console.log(results.data[i]["SEARCH_TERM"])
		}
	});
});

The output of the CSV file with different delimiter

Started
*****Using > delimiter ********
SearchTerm column Values :
cherchertech selenium
selenium-webdriver cherchertech
.
1 spec, 0 failures
Finished in 0.064 seconds

beforeEach in Jasmine

Writing a CSV file in protractor

I do not think we need steps for this tutorial, because if you store any value with separation of some delimiter with .csv file extension automatically becomes as a CSV file.

If you expect a tutorial for this, then please do let me know in the comments

The Value selected or not in the dropdown

Read/Write CSV file in Protractor | Typescript