1

I need to test the product using Jest+Puppeteer. I locate locators from the front-end in the different location that a Page Object and I need to import that JSON to the Page Object. But when I try to parse using JSON.parse() I receive:

SyntaxError: Unexpected token.

All research all of the question in the Stack Overflow, but nothing is helps.

Page Object:

import { waitForNavigation, click, type, pressEnter} from './base';
import { listsPageLocators } from '../constants/locators/listPage.json';

async function clickSearchByCompanyName(page){
    click(page, listsPageLocators.searchByCompanyNameBtn);
    waitForNavigation(page);
}

JSON:

{
    "findNewProspectsBtn" : {
        "locator" : "li.search-leads",
        "name" : "Find New Prospects Button"
    },
    "searchByCompanyNameBtn" : {
        "locator" : "li.company-name > a",
        "name" : "Search By Company Name Button"
    },
    "leadEnrichmentBtn" : {
        "locator" : "li.lead-enrichment",
        "name" : "Lead Enrichment Button"
    },
    "importUrlsBtn" : {
        "locator" : "li.import-urls",
        "name" : "Import URLs Button"
    },
    "listsNameFld" : {
        "locator" : "span.name",
        "name": "List Name Field"
    },
    "searchIndustryOrCompanyField" : {
        "locator" : "input.select2-search__field",
        "name" : "Search Industry Or Company Field"
    },
    "advancedSearchBtn" : {
        "locator" : "a[ng-click='goToAdvancedSearch()']",
        "name" : "Advanced Search Button"
    }
}

Base Page Object with click method:

async function click(page, JsonObject, text) {
    console.log(JsonObject);
    const locatorData = JSON.parse(JsonObject);
    if (typeof text !== 'undefined') {
        const el = await selectContains(page).getElement(`${locatorData.locator}:contains(${text})`);
        el.click();
        console.log(`Click on ${locatorData.name} which contains ${text}`);
    } else {
        await page.click(locatorData.locator);
        console.log(`Click on ${locatorData.name}`);
    }
}

Error:

● Single company page Tests: › C297679 - Open the company page from the list

SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)

  54 | async function click(page, JsonObject, text) {
  55 |     console.log(JsonObject);
> 56 |     const locatorData = JSON.parse(JsonObject);
     |                              ^
  57 |     if (typeof text !== 'undefined') {
  58 |         const el = await selectContains(page).getElement(`${locatorData.locator}:contains(${text})`);
  59 |         el.click();

  at parse (pages/base.js:56:30)
  at Object.clickViewList (pages/add-company-by-name-popup.js:29:5)
  at Object.clickViewList (company-page-e2e.js:29:35)

I expected that can be imported locators from the different JSON and implement it in the page object. But actually, I receive an error.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Tomash Gombosh
  • 143
  • 1
  • 3
  • 18
  • The error tells me that the JSON you have is not what it's trying to parse. Can you debug and check exactly what the value of `JsonObject` is. – phuzi Aug 21 '19 at 12:41
  • I receive that as a JSONobject parameter { locator: 'li.company-name > a', name: 'Search By Company Name Button' } – Tomash Gombosh Aug 21 '19 at 12:45
  • Hmm, I'm thinking that `JsonObject` is already an object and not a JSON formatted string at all and is being coerced in to a string and giving `[object Object]` hence the `Unexpected token o in JSON at position 1` – phuzi Aug 21 '19 at 12:47
  • And how I can get locator value from this? Or can I simplify that `[object Object]` to JSON? – Tomash Gombosh Aug 21 '19 at 12:49
  • don't try and parse it: `const locatorData = JsonObject;`. It has already been parsed – phuzi Aug 21 '19 at 12:50

1 Answers1

1

It would appear that JsonObject is not a JSON formatted string, but a fully fledged JavaScript object. No need to parse just directly assign it.

Change this: 

const locatorData = JSON.parse(JsonObject);

To this:

const locatorData = JsonObject;
phuzi
  • 12,078
  • 3
  • 26
  • 50