diff --git a/webui/package.json b/webui/package.json
index 93dfc9333c..64b4c668ee 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -10,7 +10,9 @@
     "test": "jest"
   },
   "jest": {
-    "modulePathIgnorePatterns": ["common.js"]
+    "modulePathIgnorePatterns": [
+      "common.js"
+    ]
   },
   "devDependencies": {
     "babel-core": "^6.2.1",
@@ -37,8 +39,8 @@
     "moment": "^2.13.0",
     "pluralize": "^1.2.1",
     "react": "^15.5.0",
-    "react-dom": "^15.5.0",
     "react-addons-shallow-compare": "^15.5.0",
+    "react-dom": "^15.5.0",
     "react-router": "^2.1.1",
     "react-toggle": "^2.2.0",
     "react-widgets": "^3.2.4",
diff --git a/webui/src/__tests__/common.js b/webui/src/__tests__/common.js
index 60f4cdc408..d5c819dd14 100644
--- a/webui/src/__tests__/common.js
+++ b/webui/src/__tests__/common.js
@@ -41,8 +41,31 @@ export async function assertPageContains(page, text) {
 
 export async function assertElementText(page, selector, text) {
     const fn = (selector) => {
-        document.querySelector(selector).innerText
+        document.querySelectorAll(selector).innerText
     };
     let elementText = await page.evaluate(fn, selector);
-    return expect(elementText == text);
+    await expect(elementText == text);
+}
+
+export async function login(page) {
+    await page.wait('#header-navbar-collapse > .user > li > a')
+                .click('#header-navbar-collapse > .user > li > a');
+
+    await expect(page.url() == B2ACCESS_AUTH_URL);
+
+    await page.wait('#AuthenticationUI\\.username');
+    await assertPageContains(page, "Login to UNITY OAuth2 Authorization Server");
+
+    await page.type('#AuthenticationUI\\.username', USER_NAME)
+                .type('#WebPasswordRetrieval\\.password', USER_PASS)
+                .click('#AuthenticationUI\\.authnenticateButton')
+                .wait('#IdpButtonsBar\\.confirmButton')
+                .click('#IdpButtonsBar\\.confirmButton');
+              
+    await expect(await page.title() == 'B2SHARE');
+
+    await page.wait('#header-navbar-collapse a');
+
+    await assertElementText(page, '#header-navbar-collapse > .user > li > a', USER_EMAIL);
+    // await page.end();
 }
diff --git a/webui/src/__tests__/homepage.js b/webui/src/__tests__/homepage.js
index a64bb89d6c..04fa3f0af7 100644
--- a/webui/src/__tests__/homepage.js
+++ b/webui/src/__tests__/homepage.js
@@ -1,40 +1,43 @@
 import Nightmare from 'nightmare';
 import { B2ACCESS_AUTH_URL, B2SHARE_URL, USER_NAME, USER_PASS, USER_EMAIL,
-         nightmareConfig, step, print_obj, assertPageContains, assertElementText } from './common';
+         nightmareConfig, step, print_obj, assertPageContains, assertElementText, login } from './common';
 
-
-describe('Homepage', function () {
+describe('Homepage', function () { 
     test('well formed homepage', async function () {
         let page = Nightmare(nightmareConfig).goto(B2SHARE_URL);
-        expect(await page.title() == 'B2SHARE');
-
+        await expect(await page.title() == 'B2SHARE');
         await page.wait('#header-navbar-collapse a');
         await page.wait('#page .home-page .record a');
+        await page.end();
     });
 });
 
-describe('Login', function () {
-    test('user can login', async function () {
-        let page = Nightmare(nightmareConfig).goto(B2SHARE_URL);
-
-        await page.wait('#header-navbar-collapse > .user > li > a')
-                  .click('#header-navbar-collapse > .user > li > a');
-
-        await expect(page.url() == B2ACCESS_AUTH_URL);
-
-        await page.wait('#AuthenticationUI\\.username');
-        await assertPageContains(page, "Login to UNITY OAuth2 Authorization Server");
-
-        await page.type('#AuthenticationUI\\.username', USER_NAME)
-                  .type('#WebPasswordRetrieval\\.password', USER_PASS)
-                  .click('#AuthenticationUI\\.authnenticateButton')
-                  .wait('#IdpButtonsBar\\.confirmButton')
-                  .click('#IdpButtonsBar\\.confirmButton');
-
-        expect(await page.title() == 'B2SHARE');
 
-        await page.wait('#header-navbar-collapse a');
+describe('Login', function () { 
+    test('user can login', async function() {
+        let page = Nightmare(nightmareConfig).goto(B2SHARE_URL);
+        try {
+            await login(page);
+            // page.end();          
+        } catch(e){
+            console.error(e);
+        }
+    });
+});
 
-        await assertElementText(page, '#header-navbar-collapse > .user > li > a', USER_EMAIL);
+describe('User profile', function () { 
+    test('user can navigate to the profile page', async function() {
+        let page = Nightmare(nightmareConfig).goto(B2SHARE_URL);
+        try {
+            await login(page);
+            await page.click('#header-navbar-collapse  .user  .dropdown  .dropdown-toggle')
+                        .wait('#header-navbar-collapse  .user  li  a  .dropdown-menu  li  a')
+                        .click('#header-navbar-collapse  .user  li  a  .dropdown-menu  li  a');
+            // page.end();
+        } catch(e){
+            console.error(e);
+        }
     });
 });
+
+
diff --git a/webui/src/__tests__/published_record.js b/webui/src/__tests__/published_record.js
new file mode 100644
index 0000000000..b90950d636
--- /dev/null
+++ b/webui/src/__tests__/published_record.js
@@ -0,0 +1,107 @@
+import Nightmare from 'nightmare';
+import { B2ACCESS_AUTH_URL, B2SHARE_URL, USER_NAME, USER_PASS, USER_EMAIL,
+         nightmareConfig, step, print_obj, assertPageContains, assertElementText, login } from './common';
+
+describe('A published record', function () { 
+    test('can be loaded and download the file', async function () { 
+        let page = Nightmare(nightmareConfig).goto(B2SHARE_URL+'/records/47077e3c4b9f4852a40709e338ad4620');
+        await expect(await page.title() == 'B2SHARE');
+
+        await assertElementText(page, '.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 ', 'myfile'); //file name exists
+        await assertElementText(page, '.col-lg-6  .well  .fileList  .file  .row  .col-sm-3 ', '9 B'); // file size exists 
+
+        await page.wait('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 > a')
+            .click('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 > a')
+            // .end()
+            .then(function (result) {
+                console.log(result)
+            })
+            .catch(function (error) {
+                console.error('Error:', error);
+            });
+    });
+
+    // test('should have a report abuse link', async function () { 
+    //     let page = Nightmare(nightmareConfig).goto(B2SHARE_URL+'/records/47077e3c4b9f4852a40709e338ad4620');
+    //     await expect(await page.title() == 'B2SHARE');
+    //     await page.wait('.large-record  .row  .col-lg-12  a.btn.btn-default')
+    //               .click('.large-record  .row  .col-lg-12  a.btn.btn-default')
+
+    //     await expect(page.url() == B2SHARE_URL+'/records/47077e3c4b9f4852a40709e338ad4620/abuse');
+
+    //     await page.click(' .form-horizontal  .row  .col-sm-1 > #abusecontent ') //checked
+    //                 .type(' .form-horizontal  .row  .col-sm-8 > textarea ', 'message')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#name', 'firstname lastname')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#affiliation', 'affiliation')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#email', 'a@a.com')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#address', 'address')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#city', 'Stockholm')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > select#country', 'Sweden')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#zipcode', '12345')
+    //                 .type(' .form-horizontal  .row  .col-sm-8  > input#phone', '6392615304')
+    //                 .click(' .form-horizontal  .row  .col-sm-offset-2.col-sm-8  .btn.btn-primary.btn-default.btn-block')
+    //               // .end()
+    // });
+
+
+    test('have basic metadata like open access, file size, file name', async function(){
+        let page = Nightmare(nightmareConfig).goto(B2SHARE_URL+'/records/47077e3c4b9f4852a40709e338ad4620');
+
+        await page.wait('.col-lg-6  .well  .col-sm-12.list-unstyled  li  .col-sm-8') //Open Access
+                    .evaluate(function () {
+                        return document.querySelector('.col-lg-6  .well  .col-sm-12.list-unstyled  li  .col-sm-8').innerText
+                    })
+                    .then(function(el) {
+                        expect(el).toEqual('True');
+                    })
+
+        await page.wait('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 a') // File Name
+                    .evaluate(function () {
+                        console.log("value = ", document.querySelector('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 a').innerText)
+                        return document.querySelector('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 a').innerText
+                    })
+                    .then(function(el) {
+                        expect(el).toEqual('myfile');
+                    })
+
+        await page.wait('.col-lg-6  .well  .fileList  .file  .row  .col-sm-9 a') // File size
+                    .evaluate(function () {
+                        console.log("value = ", document.querySelector('.col-lg-6  .well  .fileList  .file  .row  .col-sm-3').innerText)
+                        return document.querySelector('.col-lg-6  .well  .fileList  .file  .row  .col-sm-3').innerText
+                    })
+                    .then(function(el) {
+                        expect(el.replace( /\s/g, "")).toEqual('9B');
+                    })
+    });
+});
+
+// Should move it after creating a new record with restrict access! 
+// describe('A restricted published record', function () { 
+//     test('have open access equal to false, have a request file link and send the request file form', async function(){
+//         let page = Nightmare(nightmareConfig).goto(B2SHARE_URL+'/records/5e025f1af344444498ec555e7732fc7c');
+//         await page.wait('.col-lg-6  .well  .col-sm-12.list-unstyled  li  .col-sm-8')
+//                     .evaluate(function () {
+//                         return document.querySelector('.col-lg-6  .well  .col-sm-12.list-unstyled  li  .col-sm-8').innerText
+//                     })
+//                     .then(function(el) {
+//                         expect(el).toEqual('False');
+//                     });
+
+//         await page.wait('.large-record .row .col-lg-6  .well  a')
+//                     .click('.large-record .row .col-lg-6  .well  a');
+
+//         await expect(page.url() == B2SHARE_URL+'/records/5e025f1af344444498ec555e7732fc7c/accessrequest');
+
+//         await page.type(' .form-horizontal  .row  .col-sm-8 > textarea ', 'message')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#name', 'firstname lastname')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#affiliation', 'affiliation')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#email', 'a@a.com')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#address', 'address')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#city', 'Stockholm')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > select#country', 'Sweden')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#zipcode', '12345')
+//                     .type(' .form-horizontal  .row  .col-sm-8  > input#phone', '6392615304')
+//                     .click(' .form-horizontal  .row  .col-sm-offset-2.col-sm-8  .btn.btn-primary.btn-default.btn-block')
+//     });
+// });
+
diff --git a/webui/src/__tests__/search_in_records.js b/webui/src/__tests__/search_in_records.js
new file mode 100644
index 0000000000..1e44ea3f8d
--- /dev/null
+++ b/webui/src/__tests__/search_in_records.js
@@ -0,0 +1,36 @@
+import Nightmare from 'nightmare';
+import { B2ACCESS_AUTH_URL, B2SHARE_URL, USER_NAME, USER_PASS, USER_EMAIL,
+         nightmareConfig, step, print_obj, assertPageContains, assertElementText, login } from './common';
+
+describe('Searching in the records', function () { 
+    test('for a common term',  async function() {
+        let queries = ['paper','ChiP-seq','Daniel Zeman', 'RDA', 'wrong_query'];
+
+        for (let query of queries) {
+            let page = Nightmare(nightmareConfig).goto(B2SHARE_URL);
+            await page.wait('#header-navbar-collapse  form  .nav-search  .form-control')
+                        .type('#header-navbar-collapse  form  .nav-search  .form-control', query)
+                        .click('#header-navbar-collapse  form  .nav-search .input-group-btn  button.btn.btn-primary')
+
+            await expect(page.url() == B2SHARE_URL+'/records/?q='+query+'#');
+            switch(query){
+                case 'wrong_query': 
+                    await page.evaluate(()=>document.body.textContent)
+                                .then(function(body){
+                                    expect(body).toContain('No results');    
+                                })
+                    page.end();
+                    break;
+                default:
+                    await page.wait('.record.col-lg-12')
+                                .evaluate(()=>document.body.textContent)
+                                .then(function(body){
+                                    expect(body).toContain('1 - 1 of 1 results');    
+                                })
+                    page.end();                
+            }
+
+        }  
+    });
+
+});
\ No newline at end of file
diff --git a/webui/src/components/accessrequest.jsx b/webui/src/components/accessrequest.jsx
index c3bb5a0279..aaa9c3ee75 100644
--- a/webui/src/components/accessrequest.jsx
+++ b/webui/src/components/accessrequest.jsx
@@ -62,7 +62,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='message'>Access request message</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <textarea ref={(ref) => this.message = ref}  name='message' className="form-control" type='textarea' rows="4" cols="50"  required/>
+                            <textarea ref={(ref) => this.message = ref} id="message" name='message' className="form-control" type='textarea' rows="4" cols="50"  required/>
                         </div>
                     </div>
 
@@ -71,7 +71,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='name'>Your full name</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.name = ref} name='name' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.name = ref} id='name' name='name' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -80,7 +80,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='affiliation'>Your affiliation</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.affiliation = ref}  name='affiliation' className="form-control" type='text' required />
+                            <input ref={(ref) => this.affiliation = ref} id='affiliation'  name='affiliation' className="form-control" type='text' required />
                         </div>
                     </div>
 
@@ -89,7 +89,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='email'>Your email</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.email = ref} name='email' className="form-control" type='email' required />
+                            <input ref={(ref) => this.email = ref} id='email' name='email' className="form-control" type='email' required />
                         </div>
                     </div>
 
@@ -98,7 +98,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='address'>Your address</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.address = ref} name='address' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.address = ref} id='address' name='address' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -107,7 +107,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='city'>City</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.city = ref} name='city' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.city = ref} id='city' name='city' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -116,7 +116,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='country'>Country</label>
                         </div>
                         <div className=" col-sm-8" >
-                        <select ref={(ref) => this.country = ref} name='country' className="form-control" defaultValue=""  required >
+                        <select ref={(ref) => this.country = ref} id='country' name='country' className="form-control" defaultValue=""  required >
                             <option value=""> Choose country </option>
                             <option value="Afghanistan" >Afghanistan</option>
                             <option value="Albania" >Albania</option>
@@ -321,7 +321,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='zipcode'>Zip code</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.zipcode = ref} name='zipcode' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.zipcode = ref} id='zipcode' name='zipcode' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -330,7 +330,7 @@ export const AccessRequest = React.createClass({
                             <label forHtml='phone'>Your phone number</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.phone = ref} name="phone" type='text'  pattern="[0-9]*" className="form-control" title= "Numbers Only" required />
+                            <input ref={(ref) => this.phone = ref} id='phone' name="phone" type='text'  pattern="[0-9]*" className="form-control" title= "Numbers Only" required />
                         </div>
                     </div>
 
diff --git a/webui/src/components/reportabuse.jsx b/webui/src/components/reportabuse.jsx
index 19410ad2a6..47a70d3b01 100644
--- a/webui/src/components/reportabuse.jsx
+++ b/webui/src/components/reportabuse.jsx
@@ -76,7 +76,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='abusecontent'>Abuse or Inappropriate content </label>
                         </div>
                         <div className=" col-sm-1" >
-                        <input ref={(ref) => this.abusecontent = ref} name='reason'  type='radio' value='abusecontent'  required />
+                        <input ref={(ref) => this.abusecontent = ref} id='abusecontent' name='reason'  type='radio' value='abusecontent'  required />
                         </div>
                     </div>
                     <div className='row'>
@@ -84,7 +84,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='copyright'>Copyrighted material </label>
                         </div>
                         <div className=" col-sm-1" >
-                            <input ref={(ref) => this.copyright = ref} name='reason' type='radio' value='copyright' />
+                            <input ref={(ref) => this.copyright = ref} id='copyright' name='reason' type='radio' value='copyright' />
                         </div>
                     </div>
 
@@ -93,7 +93,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='noresearch'>Not research data </label>
                         </div>
                         <div className=" col-sm-1" >
-                            <input ref={(ref) => this.noresearch = ref} name='reason' type='radio' value='noresearch'  />
+                            <input ref={(ref) => this.noresearch = ref} id='noresearch' name='reason' type='radio' value='noresearch'  />
                         </div>
                     </div>
 
@@ -102,7 +102,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='illegalcontent'>Illegal content </label>
                         </div>
                         <div className=" col-sm-1" >
-                            <input ref={(ref) => this.illegalcontent = ref} name='reason' type='radio' value='illegalcontent'  />
+                            <input ref={(ref) => this.illegalcontent = ref} id='illegalcontent' name='reason' type='radio' value='illegalcontent'  />
                         </div>
                     </div>
 
@@ -111,7 +111,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='message'>Why is the content inappropriate? </label>
                         </div>
                         <div className=" col-sm-8" >
-                            <textarea ref={(ref) => this.message = ref}  name='message' className="form-control" type='textarea' rows="4" cols="50"  required/>
+                            <textarea ref={(ref) => this.message = ref} id='message'  name='message' className="form-control" type='textarea' rows="4" cols="50"  required/>
                         </div>
                     </div>
 
@@ -120,7 +120,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='name'>Your full name</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.name = ref} name='name' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.name = ref} id='name' name='name' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -129,7 +129,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='affiliation'>Your affiliation</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.affiliation = ref}  name='affiliation' className="form-control" type='text' required />
+                            <input ref={(ref) => this.affiliation = ref} id='affiliation'  name='affiliation' className="form-control" type='text' required />
                         </div>
                     </div>
 
@@ -138,7 +138,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='email'>Your email</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.email = ref} name='email' className="form-control" type='email' required />
+                            <input ref={(ref) => this.email = ref} id='email' name='email' className="form-control" type='email' required />
                         </div>
                     </div>
 
@@ -147,7 +147,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='address'>Your address</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.address = ref} name='address' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.address = ref} id='address' name='address' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -156,7 +156,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='city'>City</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.city = ref} name='city' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.city = ref} id='city' name='city' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -165,7 +165,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='country'>Country</label>
                         </div>
                         <div className=" col-sm-8" >
-                        <select ref={(ref) => this.country = ref} name='country' className="form-control" defaultValue=""  required >
+                        <select ref={(ref) => this.country = ref} id='country' name='country' className="form-control" defaultValue=""  required >
                             <option value="">Choose country</option>
                             <option value="Afghanistan" >Afghanistan</option>
                             <option value="Albania" >Albania</option>
@@ -370,7 +370,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='zipcode'>Zip code</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.zipcode = ref} name='zipcode' className="form-control" type='text'  required />
+                            <input ref={(ref) => this.zipcode = ref} id='zipcode' name='zipcode' className="form-control" type='text'  required />
                         </div>
                     </div>
 
@@ -379,7 +379,7 @@ export const ReportAbuse = React.createClass({
                             <label forHtml='phone'>Your phone number</label>
                         </div>
                         <div className=" col-sm-8" >
-                            <input ref={(ref) => this.phone = ref} name="phone" type='text'  pattern="[0-9]*" className="form-control" title= "Numbers Only" required />
+                            <input ref={(ref) => this.phone = ref} id='phone' name="phone" type='text'  pattern="[0-9]*" className="form-control" title= "Numbers Only" required />
                         </div>
                     </div>