Fixed sanity test issue to account for homepage redesign (datacommons…

…org#4794)

The sanity tests started failing after [migrating the homepage to use
emotion](datacommonsorg#4756)

* Added validation to run_website_sanity.sh to error gracefully if no
$domain arg is passed in
* Allow setting the protocol along with $domain arg to allow testing
from localhost
* Added `data-testid` attribute to LinkChip, LinkBox, and QueryLink
element to allow test cases to select dom elements without a fixed class
name
* Updated sanity.py test to use `data-testid` attribute to select
elements

run_website_sanity.sh

@@ -17,8 +17,22 @@ set -e
 
 # DC Instance domain like: "dev.datacommons.org", "datacommons.org"
 domain=$1
+# Check if the domain is set
+if [[ -z "$domain" ]]; then
+  echo "Error: Domain is not set."
+  echo "Usage: $0 <domain> [NO_PIP]"
+  echo "Example: $0 autopush.datacommons.org"
+  exit 1
+fi
+
+# Prepend https:// if no protocol is specified
+if [[ ! "$domain" =~ ^http:// && ! "$domain" =~ ^https:// ]]; then
+  domain="https://$domain"
+fi
+
 echo "Domain: $domain"
 
+# Set to true if you don't want to install the dependencies
 NO_PIP=$2
 
 export FLASK_ENV=webdriver
@@ -32,6 +46,6 @@ if [[ $NO_PIP != "true" ]]; then
 fi
 
 date_str=$(TZ="America/Los_Angeles" date +"%Y_%m_%d_%H_%M_%S")
-python3 server/webdriver/tests/standalone/sanity.py --mode=home --url="https://$domain"
+python3 server/webdriver/tests/standalone/sanity.py --mode=home --url="$domain"
 gsutil cp ./output/*.csv gs://datcom-website-sanity/$domain/$date_str/
 rm ./output/*.csv

server/webdriver/tests/standalone/sanity.py

@@ -145,7 +145,8 @@ def home(self, page: WebPage):
     time.sleep(1)
 
     # topic items
-    topic_items = find_elems(self.driver, By.CLASS_NAME, "chip-item")
+    topic_items = find_elems(self.driver, By.CSS_SELECTOR,
+                             '[data-testid^="chip-item-"]')
     if topic_items is None or len(topic_items) == 0:
       self.add_result(fail_result(page, start, "No topic items."))
       return
@@ -171,7 +172,8 @@ def home(self, page: WebPage):
           ))
 
     # question items
-    question_items = find_elems(self.driver, By.CLASS_NAME, "question-item")
+    question_items = find_elems(self.driver, By.CSS_SELECTOR,
+                                '[data-testid^="question-item-"]')
     if question_items is None or len(question_items) == 0:
       self.add_result(fail_result(page, start, "No question items."))
       return
@@ -215,32 +217,20 @@ def explore_landing(self, page: WebPage):
 
     page.title = self.driver.title if page.title is None else page.title
 
-    # topics
-    topics = find_elems(self.driver, By.CLASS_NAME, "item-list-text")
-    if topics is None or len(topics) == 0:
-      self.add_result(fail_result(page, start, "No topics."))
-      return
-
     # queries
-    queries_parent = find_elem(
-        self.driver,
-        By.CSS_SELECTOR,
-        "#dc-explore-landing > div > div > div.topic-container > div.topic-queries",
-    )
-    if queries_parent is None:
-      self.add_result(fail_result(page, start, "No queries."))
-      return
-    queries = find_elems(queries_parent, By.TAG_NAME, "a")
+    queries = find_elems(self.driver, By.CSS_SELECTOR,
+                         '[data-testid^="query-link-"]')
     if queries is None or len(queries) == 0:
-      self.add_result(fail_result(page, start, "No queries."))
+      self.add_result(
+          fail_result(page, start,
+                      "No query links found in explore landing page."))
       return
 
     # Pass
     self.add_result(pass_result(page, start))
 
-    explore_links = topics + queries
     explore_pages = []
-    for link in explore_links:
+    for link in queries:
       explore_pages.append(
           WebPage(
               PageType.EXPLORE,

static/js/apps/explore_landing/components/query_link.tsx

@@ -42,5 +42,9 @@ export function QueryLink(props: QueryLinkProps): ReactElement {
     // NL
     url += `&q=${encodeURIComponent(query.title)}&a=True`;
   }
-  return <a href={url}>{query.title}</a>;
+  return (
+    <a data-testid={`query-link-"${query.title}"`} href={url}>
+      {query.title}
+    </a>
+  );
 }

static/js/apps/homepage/components/sample_questions.tsx

@@ -118,13 +118,14 @@ export const SampleQuestions = ({
                     gap: ${theme.spacing.lg}px;
                   `}
                 >
-                  {randomQuestions.map((question) => (
+                  {randomQuestions.map((question, questionIndex) => (
                     <LinkBox
                       key={question}
                       link={sampleQuestionToLink(question)}
                       color={colors[overallIndex % colors.length]}
                       section={`sample-q ${index}-${overallIndex}`}
                       category={category.category}
+                      dataTestId={`question-item-${questionIndex}`}
                     />
                   ))}
                 </div>

static/js/components/elements/link_box.tsx

@@ -50,13 +50,16 @@ interface LinkBoxProps {
   category?: string;
   //the section gives location of the chip component in order to give context for the GA event
   section?: string;
+  //the data-testid for the link box
+  dataTestId?: string;
 }
 
 export const LinkBox = ({
   color,
   link,
   category,
   section = "",
+  dataTestId,
 }: LinkBoxProps): ReactElement => {
   const theme = useTheme();
 
@@ -95,7 +98,7 @@ export const LinkBox = ({
   `;
 
   return (
-    <div css={containerStyles}>
+    <div css={containerStyles} data-testid={dataTestId}>
       <a
         href={link.url}
         onClick={(): void => {

static/js/components/elements/link_chip.tsx

@@ -101,6 +101,7 @@ export const LinkChip = ({
       css={css`
         display: block;
       `}
+      data-testid={`chip-item-${linkChip.id}`}
     >
       <a
         href={linkChip.url}