'Function getCookie return null when using Selenium. Why?

I am creating a Django website. I am using the function getCookie in my html page which returns the const csrktoken.
When I run the program normally (python manage.py runserver), it works fine. i.e. the value returned by the function is not null.

But when I run it with Selenium and pytest, csrftoken = null.

Why ?

dummy_2.html


<!DOCTYPE html>
{% load static %}
<html lang="fr">

<head>
    <script type="text/javascript">
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        const csrftoken = getCookie('csrftoken');
    </script>

</head>
<body>
        <div class="container">
            <div class="row">
                <button id="trigger-dummy-button" type="button"
                    class="btn btn-primary text-white font-base fw-bold text-uppercase"
                    title="Trigger dummy button">Trigger dummy button </button>
            </div>
        </div>
        <script> 
            var someDummyURL = "{% url 'home_page:another_dummy_view' %}";
        </script>
        <script type="module" src="{% static '/js/dummy.js' %}">  </script>
    <script type="module" src="{% static '/js/main.js' %}">  </script>
</body>
</html>

dummy.js


'use strict';

var newValue;

async function postDummyFunction(request) {
    var response = await fetch(request);
    if (response.ok) {
        var updatedReturnedValue = await response.json();
        newValue = updatedReturnedValue.returnedValue;
        return newValue;
    } else {
        return false;
    }
};


document.addEventListener("DOMContentLoaded", function () {
    var triggerDummyButton = document.getElementById("trigger-dummy-button");
    var someDummyVariable = "Hello World ";
    var toPostURL = someDummyURL;
    triggerDummyButton.onclick = (e) => {
        var data = {"dummyValue": someDummyVariable};
        var request = new Request(toPostURL, {
            method: "POST",
            mode: "same-origin",
            headers: {
                "Content-Type": "application/json",
                'X-Requested-With':'XMLHttpRequest',
                "Accept": "application/json",
                'X-CSRFToken': csrftoken
            },
            credentials: 'include',
            body: JSON.stringify(data),
        });
        alert('csrftoken = ' + csrftoken);
        // Manually, with Firefox, I have csrf = someValue
        // With Selenium, I have csrf = null
        postDummyFunction(request);
    }
});

test_selenium.py


import time
import os
from selenium import webdriver
from selenium.webdriver.support import expected_conditions as EC

from django.contrib.staticfiles.testing import StaticLiveServerTestCase

from core.settings import BASE_DIR

PATH_TO_WEBDRIVER_FIREFOX = os.path.join(BASE_DIR, "test", "webdrivers", "geckodriver")

SHORT_TIME = 2.5
DEFAULT_WAIT_TIME = 6

class FooTest(StaticLiveServerTestCase):
    def setUp(self):
        self.browser = webdriver.Firefox(executable_path=PATH_TO_WEBDRIVER_FIREFOX)

    def tearDown(self):
        time.sleep(SHORT_TIME)
        self.browser.close()

    def testfoo(self):
        
        self.browser.get(("%s%s" % (self.live_server_url, "/dev/dummy_script/")))

        time.sleep(SHORT_TIME)

        elem_trigger_btn = WebDriverWait(self.browser, DEFAULT_WAIT_TIME).until(
            EC.element_to_be_clickable((By.ID, "trigger-dummy-button"))
        )

        self.browser.execute_script(
            "document.getElementById('trigger-dummy-button').click()"
        )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Function getCookie return null when using Selenium. Why?

Sources

Related Questions