andry36

на ум приходит несколько подходов:

Парсинг HTML-страницы
Bitrix обычно добавляет актуальный bitrix_sessid в скрытый input, либо в мета-тег. Например:

<meta name="bitrix_sessid" content="abcd1234">

Или:

<input type="hidden" name="sessid" id="sessid" value="abcd1234">

и в js получать:

// Если используется мета-тег
const bitrixSessid = document.querySelector('meta[name="bitrix_sessid"]').content;
// Если используется скрытый input
const bitrixSessid = document.querySelector('input[name="sessid"]').value;

Если сервер настроен так, что сессия передаётся в cookies, возможно, bitrix_sessid можно извлечь оттуда:

const cookies = document.cookie.split('; ').reduce((acc, cookie) => {
  const [key, value] = cookie.split('=');
  acc[key] = value;
  return acc;
}, {});

const bitrixSessid = cookies['bitrix_sessid'];

если prolog_admin_before.php уже подключён, можно встроить передачу bitrix_sessid прямо в JS:

<script>
  window.bitrixSessid = '<?= bitrix_sessid() ?>';
</script>

И потом использовать в JS: console.log(window.bitrixSessid)

Скорее всего сайт не видит, что капча решена. Само простое «вставить токен в #g-recaptcha-response» редко достаточно. Часто нужно действительно вызвать grecaptcha.execute() или повторить тот JS, который сайт вызывается при реальной проверке (например, по клику на «submit»).

Попробуй понаблюдать в DevTools, что происходит, когда ты вручную разгадываешь капчу: какие сетевые запросы уходят, какие JS-события или функции (onloadCallback, grecaptcha.execute(), onSubmit) вызываются. Затем повтори эти действия в Selenium - не просто пихни токен на страницу, а заставь сайт пройти ровно тот же workflow:
Переключись в нужный iframe (если нужно),
Подставь капча-токен,
Выполни нужные скрипты/клики/сабмиты.
Если сайт использует серверную проверку, то обязательно должен быть запрос с передачей g-recaptcha-response. Без этого сайт даже не узнает, что капча решена. Проверяй, уходит ли он вообще и с каким телом. Обычно этого хватает, чтобы скрытый телефон начал отображаться.

Для реализации ограничения движения элемента по оси Y в пределах от 0% до 100%, необходимо добавить логику, которая будет проверять текущее значение yTranslate и ограничивать его в указанных границах.

const Draggable = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [yTranslate, setYTranslate] = useState(0); // %
  const [initialMousePosition, setInitialMousePosition] = useState(null);

  const onMouseDown = ({ clientY }) => {
    setInitialMousePosition(clientY);
    setIsDragging(true);
  };

  useEffect(() => {
    const onMouseMove = (e) => {
      if (isDragging && initialMousePosition !== null) {
        const deltaY = e.clientY - initialMousePosition;
        const containerHeight = document.querySelector(".relative").offsetHeight;

        // px -> %
        const deltaYPercent = (deltaY / containerHeight) * 100;
        let newTranslate = yTranslate + deltaYPercent;

        //  [0%, 100%]
        newTranslate = Math.max(0, Math.min(100, newTranslate));

        setYTranslate(newTranslate);
        setInitialMousePosition(e.clientY);
      }
    };

    if (isDragging) {
      window.addEventListener("mousemove", onMouseMove);
    }
    return () => window.removeEventListener("mousemove", onMouseMove);
  }, [isDragging, initialMousePosition, yTranslate]);

  useEffect(() => {
    const onMouseUp = () => setIsDragging(false);
    window.addEventListener("mouseup", onMouseUp);
    return () => window.removeEventListener("mouseup", onMouseUp);
  }, []);

  return (
    <div className="text-[15px]/[22px] bg-white">
      <div style={{ '--coverY': `${yTranslate}%` }} className="relative aspect-[640_/_200] bg-[#e5e5e5] overflow-hidden">
             {/* не забудь повесить onMouseDown  на нужный элемент */}
      </div>
    </div>
  );
};