Дмитрий Шамонов

Это делает не JS, а браузер. Ведь ты используешь html entity. Вот эта entity и преобразуется в текст.

А экранирование простое, как и везде:

<a onclick="return clickme('click \` 20');" href="#">Click</a>

Если я правильно понял задачу - вынести *.css в отдельный bundle, то тебе нужен этот npm пакет https://www.npmjs.com/package/extract-text-webpack...

Selenium взаимодействует с браузером через соответствующий webdriver (свой для IE, Chrome, FF и т.д.). Он не "кроссбраузерный" в том смысле, что нельзя просто взять и запустить тесты во всех браузерах одновременно. Нужно инициализировать driver соответствующего браузера, тогда тесты выполнятся из под этого браузера.

С Puppeteer не имел опыта. По нему ничего сказать не могу.

В селекторе #ribbonCenter свойство width равен 1px. Поэтому и видна только "узкая однопиксельная полоска" =)

В любом случае, при использовании данного спрайта результат будет примерно таким:

Функция replace и соответствующее регулярное выражение помогут.

Нужно где то хранить связку "пользователь" - "не отображаемые задания", ну и в запросе получения списка заданий исключать отменённые пользователем.

Для border отступ задать невозможно.
Как вариант, сделай png с зелёной строкой и нужным отступом слева и примени свойство:
background: yellow url(line.png) no-repeat 0 0; Но в этом случае нужно делать очень длинную линию что бы заложить возможность применения в ячейках разной ширины.
Либо так.

Алгоритм такой - повесить событие на чекбокс, при его активации/деактивации найти все со статусом checked и из их содержимого построить нужного вида строку.

С помощью js. Смотри в сторону jquery. Ещё ссылка.

HOW TO CENTER IN CSS

Не изучена очень важная тема в CSS - Каскадирование, без понимания этого вопроса будешь постоянно сталкиваться с подобными проблемами.