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 now days other operating systems also supports excel sheets but excel sheets becomes heavy when we store large data.

CSV files overcomes those issues, and CSV files are not dependent on packages, if we donot 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 wituout using any package in this example, but if you want go with 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 he csv file with basic file system :

  • Create it and describe block in jamine
  • 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:\\Path\\abc.csv', 'utf8');		
    
  • Split the data using \n (new line) as rows are stored in new lines in csv files
  • Once we split we wil have array of value, iterate them to get the values
  • 
    var allTextLines = csv.split(/\r\n|\n/);		
    
  • Now split the line using the delimiter more often the csv file values are stored with comma separation but in above file i have separated using greater than sign(>)
  • 
    var data = allTextLines[i].split('>');			
    
  • Push the values from a row into a array
  • 
    describe('Protractor Typescript Demo', function() {
    	it('CSV File Operations', function() {
    		const fs = require('fs');
    		const csv = fs.readFileSync('D:\\Path\\abc.csv', 'utf8');
    	
    			var allTextLines = csv.split(/\r\n|\n/);
    			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);
    	});
    });			
    


    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		
    


papaparse module with Protractor

Papaparse package is a parser converting CSV text input into arrays or objects. It implements 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 urls.

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

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


									npm install papaparse			
									


npm-install-csv-protractor

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 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:\\Path\\abc.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 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. nested-array-format-csv-file-protractor Complete program for reading CSV file using papaparse.


const papa = require('papaparse');
	const fs = require('fs');
	const file = fs.readFileSync('D:\\Path\\abc.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			


Read CSV file in Protractor with Typescript

We can use the Papa Parse package along with protractor, below program will get the first row, 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:\\Path\\abc.csv', 'utf8');
		
		papa.parse(file, {
			complete: (result) =>{
				element(by.name("q")).sendKeys(result.data[0][2])
			}
		});
	});
});			


csv-file-protractor

Send emails using NodeMailer

Steps to send eMail

CSV file With header in Protractor

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

In such situations people tend to lose time on guessing what the values is but in real time scenarios most of the we donot 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 of the columns like what the column contains

To provide such information people tend to write a header in the csv file, previous csv file I used doesnot had 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 Papaparse module along with protractor. We have to provide an information to papaparse that we have a header in out file.


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


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

Now in Below program I am trying to 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:\\Path\\abc.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"])
	});
});			


Output of the csv file with header in 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.xxx.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: '\r\n',
     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
			


csv-file-header-protractor

Read Specific Coloumn 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:\\Path\\abc.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"])
	}
});			


Output of Specific CSV file column prgram


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

Other than Comma Separated files

CSV file means Comma Separated Values file but it doesnot means it must always contains values with comma separation.

There is a chance that a CSV file can contain separators like 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 delimited other than 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:\\Path\\abc.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"])
		}
	});
});			


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			


Writing a CSV file in protractor

I donot 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 csv file.

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

Value selected or not in dropdown

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
Copyright © CherCher Tech