Note: This Help Center Article is somewhat technical, and assumes a basic knowledge of HTML, CSS and the DOM. If you are having trouble with these things, please explore the resources provided and follow the guide below!
Sometimes, Kimono will encounter websites that it cannot scrape data from. This will generally happen when you attempt to save an API. Instead of creating the API, a failure screen will pop up like this:
This failure screen will vary depending on the type of error you've encountered. All of the error pages include an error code, which will provide helpful context on what the problem is and how to troubleshoot it.
What the Error Codes Mean
Error codes E10 and E11 indicate that there was a problem with Kimono finding the properties for a given API. When a property is created on an API, Kimono will auto-generate a set of CSS selectors for the data selection. Alternatively, you can set your own CSS selectors.
Regardless of how the CSS selectors are generated, if they do not return data, Kimono will alert you to either E10 or E11.
E10 means that Kimono could not find any data for the API for the given set of CSS selectors. This means that the API could not be created, since there is no data to save.
E11 means that Kimono was able to find some data for a set of CSS selectors, but that some properties did not return data. In this case, your API will save, but you may want to address the properties that did not return data. This will ensure that you have a full data set.
Why CSS Selectors fail to return data
CSS selectors can fail for a variety of reasons:
- The CSS selector is invalid, or points to a part of the HTML that does not exist
- The CSS that Kimono auto generates is different than the actual page CSS.
- The CSS selector expects more data than there is on the page. This can happen if a page changes data frequently.
- The page is in a different state for an end user than when Kimono visits it. This can happen if it requires some localization, login, or things of this nature.
- Sometimes pages will dynamically change their HTML and CSS markup, which can cause specific selectors to break.
- Some pages will use A/B testing. This means that sometimes sites will show different versions of the same page to test which page is best. When Kimono visits the page, it may 'see' a different version of the page than what you as a user see.
How to address E10 and E11 errors
To fix an E10 or E11 error, you will need to fix the CSS selectors that are not returning data. Here are a few ways to check your CSS selectors for common problems.
Note that you will have to use advanced mode to view and modify the current CSS selectors. Another helpful tool here are browser developer tools. If you use Chrome, you can use the Chrome tools to inspect element and see the HTML/CSS for any part of a page.
- Try to make the selector more general. If your selector references multiple HTML classes, you may want to try removing these and seeing what is returned. You can always add more specificity later. For example, go from 'div.myclass > div.myotherclass' to 'div > div'.
- Try to make the selector less nested. If your selector is very nested, like this: 'div > div > h2 > a', it has more places where it can break. Try to use a simple class instead, like this: 'h2.myclass > a'.
- Watch out for last-child and nth-child selectors. These selectors will sometimes be generated by Kimono, but may break if the amount of data on a page changes.
- Try looking at the page outside of Kimono to generate a CSS selector. Sometimes, Kimono will change the HTML structure of the page, making the selectors not work.
- If nothing is returning, try a very simple selector like 'div' or 'h1' or even 'body.' If these don't work, then there may be something wrong beyond just the CSS selector.
- If a page uses A/B testing, you can use two selectors for the same property! Simply separate each CSS selector with a comma, like this: 'div.classA, div.classB'
Workflow for finding CSS Selectors
If you're new to CSS selectors, here's how you to write them: To start, use the Web Inspector to inspect the HTML of the page. Right click on your mouse to open your browser tools dropdown and select "Inspect Element." This should create a panel on your browser that shows you the HTML for all the elements on the page. To navigate to the field you wish to inspect, click on the magnifying glass icon in the top left of the panel. Now, if you move your cursor over the field Kimono isn't selecting properly and it will highlight the corresponding HTML of the element in the panel.
Shown here is the element inspection of a submit button, the most common Auth API field unrecognized by Kimono. The field could be anything, though - any data you want to select! The tag identified for this button is an input with type=submit and value=login.
You would use this information to create a specific CSS selector for Kimono to identify the button with (note that there are 2 specifiers--type and value, you should use the most specific one in your CSS selector):
Please refer to this guide for more specific selector annotation for writing your own!
Troubleshooting E10 and E11 codes for Auth APIs
Occasionally, Auth APIs will return E10 or E11 error codes. Note that these are different than E41 ADD LINK error codes, which indicate an issue with finding the selectors for login. Instead, an E10 or E11 for an Auth API indicates that finding the selectors for login was successful, but that there may be another issue. This could be one or multiple of the following:
- Login credentials were invalid
- Kimono could not find the original page after logging in. In other words, the login succeeded, but Kimono was not redirected to the page with data.
- The authentication may have worked, but the CSS selectors for the data are wrong.