Как преобразовать следующую таблицу в JSON с помощью Cypress?

У меня есть следующая таблица, и я хочу преобразовать ее в JSON определенным образом.

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

Мой ожидаемый результат будет таким, поскольку мне нужно сравнить данные в пользовательском интерфейсе в таблице html и файле json с ожидаемыми данными (Примечание: может быть разное количество строк):

{
  "myrows" : [
    {
      "Column 1" : "A1",
      "Column 2" : "A2",
      "Column 3" : "A3"
    },
    {
      "Column 1" : "B1",
      "Column 2" : "B2",
      "Column 3" : "B3"
    },
    {
      "Column 1" : "C1",
      "Column 2" : "C2",
      "Column 3" : "C3"
    }
  ]
}

Как это можно сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
80
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

const rows = document.querySelectorAll("tbody tr");

const result = {
  myrows: []
};
rows.forEach(r => {
  const rData = {}
  r.querySelectorAll("td").forEach((c, i) => {
    rData[`column_${i + 1}`] = c.innerHTML;
  })
  result.myrows.push(rData)
})

console.info(result);
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>
Ответ принят как подходящий

Довольно просто перебирать строки, а затем ячейки в строке.

Используйте значения индекса из команды each(), чтобы получить доступ к ожидаемому значению в JSON.

const expected = { "myrows" : [
  ...  // as in the question, abreviated here
]}

it('check the table', () => {
  cy.get('table tbody tr').each(($row, rowIndex) => {
    cy.wrap($row).find('td').each(($cell, cellIndex) => {
      const text = $cell.text()
      expect(text).to.eq(expected.myrows[rowIndex][`Column ${cellIndex}`]
    })
  })
})

следующий подход, которому я следовал, опираясь на ответ, данный «Женевьев ИЛИ» на мой пост, спасибо @Genevieve ИЛИ

var headerList = []
cy.get('table thead tr th').each(($el)=>{
      var headerName = $el.text()
      headerList.push(headerName)// dynamically make a list of header
)}.then(()=>{
      var jsonData = [];
  
      cy.get('table tbody').find('tr').each(($row, rowIndex) => {
             jsonData[rowIndex] = {};// creates object for each row
             cy.wrap($row).find('td').each(($cell, cellIndex) => {
                const text = $cell.text()
                jsonData[rowIndex][headerList[cellIndex]] = text
                const expected = { "myrows" :jsonData}
            
            })
       })
})
      

Мой вывод

{
  "myrows": [
    {
      "column_1": "A1",
      "column_2": "A2",
      "column_3": "A3"
    },
    {
      "column_1": "B1",
      "column_2": "B2",
      "column_3": "B3"
    },
    {
      "column_1": "C1",
      "column_2": "C2",
      "column_3": "C3"
    }
  ]
}

Другие вопросы по теме